Page 1 of 1
How can I change monospace elements to sans-serif
Posted: Thu Oct 31, 2019 9:02 pm
by 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
Re: How can I change monospace elements to sans-serif
Posted: Fri Nov 01, 2019 2:44 pm
by 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
Re: How can I change monospace elements to sans-serif
Posted: Fri Nov 01, 2019 10:31 pm
by 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).
Re: How can I change monospace elements to sans-serif
Posted: Tue Nov 05, 2019 4:59 pm
by 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
Re: How can I change monospace elements to sans-serif
Posted: Fri Nov 08, 2019 11:53 pm
by 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 2860 times
Re: How can I change monospace elements to sans-serif
Posted: Fri Nov 15, 2019 12:19 pm
by 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
Re: How can I change monospace elements to sans-serif
Posted: Fri Nov 15, 2019 3:57 pm
by chrispitude
I second what Dan said - use the CSS Style Inspector! It will show you any CSS properties that are overriding your setting.
Re: How can I change monospace elements to sans-serif
Posted: Tue Nov 19, 2019 6:41 pm
by 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.
Re: How can I change monospace elements to sans-serif
Posted: Tue Nov 19, 2019 6:51 pm
by 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.
Re: How can I change monospace elements to sans-serif
Posted: Wed Nov 20, 2019 10:55 am
by 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