DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings
Post here questions and problems related to editing and publishing DITA content.
-
- Posts: 53
- Joined: Sat May 22, 2021 6:04 pm
DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings
Post by patjporter »
Hello again,
Last question hopefully!
How do I change the size of the fonts for chapter/section/sub-section headings?
Thanks!
Pat
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 1379 times
Pat
Re: DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings
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.
For example, to change the titles styles, you can match the either the "topic/title" class, or one of the .topictitle1, .topictitle2,... classes:
Many regards,
Dan
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 1373 times
Code: Select all
.topictitle1 {
font-size:3em;
}
.topictitle2 {
font-size:2em;
}
...
Dan
- Attachments
-
- image.png (95.43 KiB) Viewed 1373 times
-
- Posts: 6
- 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 »
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
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
Re: DITA to PDF Using HTML5 and CSS: Changing Size of Chapter/Section Headings
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
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
-
- Posts: 6
- 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 »
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
I have been doing a CSS course in LinkedIn Learning so it is starting to make a lot of sense now.
Pat
Return to “DITA (Editing and Publishing DITA Content)”
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service