No Bold in PDF using HTML with CSS

[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

But in the PDF, the are not:

image.png

Also, TOC entries that seem to be automatically formatted as bold in the broswer:

image.png

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]

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

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

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

[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

[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]

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

Pat

[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]

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