How can I change monospace elements to sans-serif

amyers3
Posts: 14
Joined: Sat Feb 16, 2019 8:43 pm

How can I change monospace elements to sans-serif

Post by amyers3 » Thu Oct 31, 2019 9:02 pm

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
Adam Myers
Technical Publications Manager
MATRIXX Software

Dan
Posts: 428
Joined: Mon Feb 03, 2003 10:56 am

Re: How can I change monospace elements to sans-serif

Post by Dan » Fri Nov 01, 2019 2:44 pm

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
Posts: 14
Joined: Sat Feb 16, 2019 8:43 pm

Re: How can I change monospace elements to sans-serif

Post by amyers3 » Fri Nov 01, 2019 10:31 pm

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).
Adam Myers
Technical Publications Manager
MATRIXX Software

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

Re: How can I change monospace elements to sans-serif

Post by julien_lacour » Tue Nov 05, 2019 4:59 pm

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
Posts: 14
Joined: Sat Feb 16, 2019 8:43 pm

Re: How can I change monospace elements to sans-serif

Post by amyers3 » Fri Nov 08, 2019 11:53 pm

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
2019-11-08_13-46-00.gif (2.88 KiB) Viewed 24 times
Adam Myers
Technical Publications Manager
MATRIXX Software

Post Reply