DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings

patjporter
Posts: 13
Joined: Sat May 22, 2021 6:04 pm

DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings

Post by patjporter » Tue Oct 12, 2021 1:15 pm

Hello again,

Last question hopefully!

How do I change the size of the fonts for chapter/section/sub-section headings?
Screen Shot 2021-10-12 at 6.14.47 AM.png
Screen Shot 2021-10-12 at 6.14.47 AM.png (57.83 KiB) Viewed 236 times
Thanks!
Pat

Dan
Posts: 492
Joined: Mon Feb 03, 2003 10:56 am

Re: DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings

Post by Dan » Tue Oct 12, 2021 2:31 pm

Hi Pat,

Generally, you can debug the CSS by using an internet browser, as explained here: https://www.oxygenxml.com/doc/ug-ope/to ... ng_the_css
You may use the .merged.html file from the output folder and use the developer tools from the browser to identify classes and elements and propotype style changes, and then copy the new selectors to your CSS customization file.
inspecting-styles.png
inspecting-styles.png (101.21 KiB) Viewed 230 times
For example, to change the titles styles, you can match the either the "topic/title" class, or one of the .topictitle1, .topictitle2,... classes:

Code: Select all


.topictitle1 {
  font-size:3em;
}
.topictitle2 {
  font-size:2em;
}
...
Many regards,
Dan
Attachments
image.png
image.png (95.43 KiB) Viewed 230 times

pjporter88
Posts: 4
Joined: Sat Oct 16, 2021 8:36 pm

Re: DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings

Post by pjporter88 » Sat Oct 16, 2021 8:40 pm

Hi Dan, thank you again for all of this information (logging in from my personal account, not my work account),

Question...I am new to CSS and am doing some LinkedIn Learning to learn more...is there any difference to the code structure used to style HTML vs PDF output or is CSS the same, it is just which element tags get used?

Or maybe in this case the answer is the DITA gets converted to HTML and then I guess the CSS gets applied to the HTML? What then makes the HTML "fit" in all the right places in the PDF generator? Something that the DITA Open Tool kit has built in?

Sorry for the questions but it is hard for an inexperienced person to understand what is actually happening, what is driving what, so I can learn how to do all of this kind of stuff myself.

Thanks!
Pat

Dan
Posts: 492
Joined: Mon Feb 03, 2003 10:56 am

Re: DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings

Post by Dan » Mon Oct 18, 2021 11:50 am

Let me explain a bit:

In the PDF transformation the DITA topics are joined together in a big map. In this file we still have DITA elements, but with class attributes expanded and all references resolved.

Next, this is transformed to HTML5. Now we have HTML elements but preserving the original DITA class attributes set to them (including the outputclass attribute values).

The Chemistry processor transforms this big HTML5 file to PDF.

Both the WebHelp and PDF transformations from Oxygen are based on the HTML5 intermediate format because it gives a big advantage: you can reuse parts of the CSS for both outputs, since the HTML structure and class attributes are similar.

We have developed a web application that can be used to create CSS based customizations encapsulated into Oxygen Publishing Templates: https://styles.oxygenxml.com/

To read more about Oxygen Publishing Templates and how to use them from Oxygen XML Editor/Author:

https://www.oxygenxml.com/doc/versions/ ... plate.html

Or checkout this video: https://www.oxygenxml.com/demo/osb_video.html

Many regards,
Dan

pjporter88
Posts: 4
Joined: Sat Oct 16, 2021 8:36 pm

Re: DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings

Post by pjporter88 » Mon Oct 18, 2021 2:40 pm

Thank you Dan, I am really learning a lot!

I have been doing a CSS course in LinkedIn Learning so it is starting to make a lot of sense now.

Pat

Post Reply