How can I change monospace elements to sans-serif

[amyers3]

Hi,

I am using the Ditamap PDF html5/css transformation in editor 21.1.

I set my font-family to the following:

Code: Select all

* {font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif}

Everything works fine except for elements that are monospace. Content in these elements is monospaced, but with a serif font.

How can I make this content sans-serif, too? For example, codeph, codeblock, filepath, userinput....

Thanks a lot.

Adam

[Dan]

In case you want to replace all fonts in your publication with a single Sans Serif font, you can increase the importance of your CSS rule:

Code: Select all

* {
	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif !important;
}

In case you want to change the font for all code sections, you should create rules that match those elements.
For example:

Code: Select all

pre,
.codeblock {
	font-family: monospace;
}

.codeph {
	font-family: monospace;
}

.filepath {
	font-family: monospace;
}

In general, to debug your CSS and test selectors, see:
https://www.oxygenxml.com/doc/versions/ ... ng_the_css

Many regards,
Dan

[amyers3]

Thanks for your reply, Dan.

The problem I am having is that when I set the font family as this:

* {
font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif !important;
}

These styles are correctly ignored:

pre,
.codeblock {
font-family: monospace;
}

.codeph {
font-family: monospace;
}

.filepath {
font-family: monospace;
}

If I remove !important, monospace works, but the font changes to serif in the pdf. In the merged html, the font appears correctly (monspace +sans-serif).

[julien_lacour]

Hello Adam,
What I will recommend for you is NOT using the * selector inside you customization.
Instead you should prefer:

Code: Select all

/* This will customize the main title */
*[class ~= "front-page/front-page-title"] {
    font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
}

/* This will customize the content */
body {
    font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
}

Regards,
Julien

[amyers3]

Thanks Julien,

I tried this and it didn't work, either. Codeph, codeblock, filepath are still what looks like courier.

I went back to the oob pdf based on html5 transformation and the only change I made was to the oxygen-print.css file:

body {
font-size: 10pt;
font-family: Roboto;

I get the same result. The filepath is courier while everything else is Roboto - as you can see in the attachment.

2019-11-08_13-46-00.gif (2.88 KiB) Viewed 2862 times

[julien_lacour]

If what you want is simply replacing the default font for monospace contents you should do the following in your custom CSS file:

Code: Select all

.pre,
.filepath,
.codeph,
.codeblock {
    font-size: 10pt;
    font-family: Roboto;
}

Feel free to modify this sample, add some classes, etc... if I omit something.

Regards,
Julien

[chrispitude]

I second what Dan said - use the CSS Style Inspector! It will show you any CSS properties that are overriding your setting.

[amyers3]

I appreciate everybody's input, and yes, I use the css inspector. I don't know if anybody has actually tried this, but no matter what I do, codeblock is not sans serif in the pdf. In the merged html file, the codeblock font is sans serif and the inspector identifies the style in the css. But in the PDF, codeblock only appears as serif. I'm giving up.

[amyers3]

Ok - I decided to try one more time. I was able to get the codeblock to be sans serif by not using the class and by using the code element. Thanks for everybody's input.

[julien_lacour]

Hello Adam,

I can provide you a snapshot of the current version of the oxygen-publishing-engine, can you contact us at support@oxygenxml.com.
If the problem still reproduces in this version feel free to send us an email with a sample of your customization, like this we will try to reproduce your problem and correct it.

Regards,
Julien