DITA to PDF with HTML5 and CSS Font Color

[patjporter]

Hello,

I have a need for some different font colors in my PDF. I am using the PDF from HTML with CSS. Can you tell me how I would need to tag my source DITA elements such as <p> and/or <ph> to get different colors than black and what the corresponding CSS would be? I just don't know what attributes to use in the DITA XML.

Thanks!
Pat

[chrispitude]

Hi Pat,

if you are looking for just specific predefined colors, you could use various values of @outputclass:

Code: Select all

<p>This text is <ph outputclass="red">red</ph>.</p>

then give PDF Chemistry some CSS to implement them:

Code: Select all

*[outputclass ~= "red"] { color: red; }

You could even add this same CSS file to an extension of the DiTA framework as an authoring CSS file, so that the Oxygen editor shows the same colors that will be used in the PDF.

Is this what you were looking for?

[patjporter]

Close...I used outputclass="blue" in my DITA. I am not using Chemistry, just the PDF transformation in Oxygen XML Editor using HTML5 and CSS. I added a class .blue to my CSS and it works, thanks!

Sorry for all the questions...how do I import a font family into the HTML5 using CSS transformation?

And finally, if I wanted to add a full page image to the cover page in the PDF using HTML5 using CSS transformation, how might I do that?

Thanks!
Pat

[julien_lacour]

Hi Pat,

Regarding the fonts embedding part you should check this chapter from the user-guide, everything is detailed here.

For the cover page, there's a small topic in the user-guide.

Also you should check the fourth episodes of the Transforming XML and HTML documents to PDF using CSS webinars available here: https://www.oxygenxml.com/pdf_chemistry ... y=Webinars (especially Part 3)

Regards,
Julien

[patjporter]

Thank you, I have looked at the documentation and the videos, but I am a hopeless amateur trying to produce a professional product for my company.
I tried using your cover css code, but then than put the title on page 2.
I am trying to use a font installed on my Windows machine...the CSS does not seem so import it, so the title remains Arial. I am not sure why.
Also, I want the image to take up the entire page, but it only takes up half the page.
Here is what my css looks like. Any suggestions?

image.png (36.14 KiB) Viewed 1664 times

I am lost!
Pat

[julien_lacour]

Hi Pat,

I'm sorry I understood that you were not using DITA Map PDF - based on HTML5 & CSS scenario when I first answered.
By the image you attached, it seems that you are using Oxygen Styles Basket to generate the publishing template for your transformation.
I will just mention here that if you modify the styles.css file generated by Oxygen Styles Basket, you will lost all your modifications if you re-upload it.

In order to change the font-family for the document, besides what you already change you need to use the following rules:

Code: Select all

@page {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}
body {
  font-family: 'Arial', sans-serif; 
}

Make sure the font is correctly installed for all the users and appear in C:\Windows\Fonts, also check its name (open the font file or select it in MS Word for example). If not, you can still embed the font manually.
There are more information about Fonts in this topic from our user-guide.

For the cover page, you can check How to Add a Background Image for the Cover in our user-guide.
Also we usually recommend the usage of SVG files for the cover, as they can be easily scaled to the desired size.

PS: It is possible to Debug the CSS, just follow the instructions from this topic: https://www.oxygenxml.com/doc/versions/ ... e_css.html
PS2: I also link some more webinars than will surely cover other of your needs: https://www.oxygenxml.com/publishing_en ... y=Webinars

Regards,
Julien

[patjporter]

Thank you Julien,
Can you please write the proper css entry for me to change the title to a different font? I'm not sure I am selecting the correct thing to change the font of the tile, which may be my root problem.
Thanks!
Pat

[patjporter]

OK, I got the title to work based on your last post! Still working on the image.

Finally, is there a way to place an xref in each topic to link back to the bookmap table of contents since it is a generate file?

Thank you so much!!
Pat

[chrispitude]

Hi Pat,

I strongly suggest using Chrome's Inspector tool to identify the selectors you need for styling. There is some information here:

Inspecting the Applied Styles Using the Chrome Browser

Just right-click the title you want to change, choose Inspect, then set the media type to "print" as described in the link above. Hint - you should be able to press ESC to get to the media setting quickly:

image.png (16.92 KiB) Viewed 1628 times

then press ESC again to make that subpane disappear.

Now you can look through the HTML structure and see which element best corresponds to the title you want to change, and also see what selectors currently apply to it. Helpful hint - looking at the existing selectors can help guide you to write your own, as often there can be existing selectors that format the specific element you want to modify.

You can even use the New Style Rule button to add temporary rules to try out different styles right in the browser:

image.png (14.05 KiB) Viewed 1628 times

This is much faster than publishing PDFs to write rules by trial-and-error. It is also a great way to learn how the styles work, what selectors will override what other selectors, and so on. Note that when you use the New Style Rule button, there is a learning curve with how to click and use the Tab key to modify the selector part, modify the rule part, and edit/add selectors and properties. But once you get used to it, you can make it work.

[patjporter]

I will do that, thank you!!
Pat

[patjporter]

Hello again and thank you very much for all your help!

I went back to the Styles Basket and started over and got a great new template and css. It is working great. Only question I have now is I am getting these errors when I run the transform PDF using HTML5 and CSS:

image.png (42.04 KiB) Viewed 1594 times

Can you help me understand how to correct these?

Thank you!!
Pat

[andrei_pomacu]

Hi,

These warnings should not affect the output.
In Oxygen 25 we were able to deal with them and they will not be transmitted.

Regards,
Andrei