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

[patjporter]

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 (57.83 KiB) Viewed 1376 times

Thanks!
Pat

[Dan]

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 (101.21 KiB) Viewed 1370 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

[pjporter88]

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]

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]

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