No Bold in PDF using HTML with CSS

Post here questions and problems related to editing and publishing DITA content.
patjporter
Posts: 53
Joined: Sat May 22, 2021 6:04 pm

No Bold in PDF using HTML with CSS

Post by patjporter »

Hello, this is a followup to my earlier queries. I have watched the videos and read the Help, but not sure if the guidance is applicable since I used the Styles Basket. I dragged/dropped my fonts into the styles basket UI, and the styles.css has this:

Code: Select all

@font-face {
  font-family: 'BrandingFont';
  src: url(resources/primaryBrandingFonts.ttf) format('truetype');
}
@font-face {
  font-family: 'SecondaryBrandingFont';
  src: url(resources/secondaryBrandingFonts.ttf) format('truetype');
}
@media print {
  @page front-page {
    background-image: url("resources/cover.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
}
/* Bold selection in Publication TOC. WebHelp only. */
@media screen {
  .wh_publication_toc .active > .topicref a {
    font-weight: bold;
  }
}
In the browser, elements in DITA that were wrapped in <b> are bold:
image.png
image.png (245.45 KiB) Viewed 1402 times
But in the PDF, the are not:
image.png
image.png (26.39 KiB) Viewed 1402 times
Also, TOC entries that seem to be automatically formatted as bold in the broswer:
image.png
image.png (54.55 KiB) Viewed 1402 times
are not bold in the PDF:

Do you have any suggestions on how to adjust the css so the PDF matches the browser output formatting?

Thank you!
Pat
chrispitude
Posts: 907
Joined: Thu May 02, 2019 2:32 pm

Re: No Bold in PDF using HTML with CSS

Post by chrispitude »

Pat - the PDF should match the rendering of the merged HTML generated by the PDF-CSS-HTML5 transformation, as long as the browser's media emulation is set. To confirm, do you have the media type set to "print" in the browser inspector?

image.png
image.png (18.21 KiB) Viewed 1393 times

In your inspector screen capture, I see "font-weight" has a strikethrough style, indicating that something is overriding the browser default ("user agent"). If you click the "Computed" button, what do you see as the final font-weight, and if you expand the font-weight expand/collapse icon, where does the winning setting come from?

image.png
image.png (69.15 KiB) Viewed 1393 times

You can also click this button to show the computed styles in a separate pane for reference (useful if you have a large or widescreen display):

image.png
image.png (16.57 KiB) Viewed 1393 times
patjporter
Posts: 53
Joined: Sat May 22, 2021 6:04 pm

Re: No Bold in PDF using HTML with CSS

Post by patjporter »

Hello, thanks for your reply. I selected Emulate Print both in Edge and Firefox. The browser still shows bold and here is what the inspect pane shows. I had even created a class .b {font-weight: 800;} in my custom css. That didn't seem to do anything in the print version.
image.png
image.png (147.56 KiB) Viewed 1389 times
julien_lacour
Posts: 483
Joined: Wed Oct 16, 2019 3:47 pm

Re: No Bold in PDF using HTML with CSS

Post by julien_lacour »

Hello,

Could you indicate which fonts you uploaded into Oxygen Styles Basket?
I will try to see if I can reproduce the problem on my side.

Regards,
Julien
patjporter
Posts: 53
Joined: Sat May 22, 2021 6:04 pm

Re: No Bold in PDF using HTML with CSS

Post by patjporter »

Hi Julien, First one is a company font, second one I got from Google fonts.

Pat
julien_lacour
Posts: 483
Joined: Wed Oct 16, 2019 3:47 pm

Re: No Bold in PDF using HTML with CSS

Post by julien_lacour »

Hello Pat,

I reproduced the issue, I also added an issue on Oxygen Styles Basket to correct this behavior.
Until the release of the new version, you can already alter the styles.css file to add this:

Code: Select all

@font-face {
  font-family: 'BrandingFont';
  src: url(resources/primaryBrandingFonts.ttf) format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'BrandingFont';
  src: url(resources/primaryBrandingFonts.ttf) format('truetype');
  -oxy-simulate-style: yes;
  font-weight: 700;
}
@font-face {
  font-family: 'SecondaryBrandingFont';
  src: url(resources/secondaryBrandingFonts.ttf) format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'SecondaryBrandingFont';
  src: url(resources/secondaryBrandingFonts.ttf) format('truetype');
  -oxy-simulate-style: yes;
  font-weight: 700;
}
The problem should disappear after that. I will notify this thread once the new version will be available.

Regards,
Julien
patjporter
Posts: 53
Joined: Sat May 22, 2021 6:04 pm

Re: No Bold in PDF using HTML with CSS

Post by patjporter »

That worked, thank you Julien!!! Much appreciated!
Pat
Post Reply