How can I change monospace elements to sans-serif

amyers3
Posts: 16
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: 433
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: 16
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: 19
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: 16
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 214 times
Adam Myers
Technical Publications Manager
MATRIXX Software

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

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

Post by julien_lacour » Fri Nov 15, 2019 12:19 pm

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
Posts: 81
Joined: Thu May 02, 2019 2:32 pm

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

Post by chrispitude » Fri Nov 15, 2019 3:57 pm

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

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

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

Post by amyers3 » Tue Nov 19, 2019 6:41 pm

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

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

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

Post by amyers3 » Tue Nov 19, 2019 6:51 pm

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

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

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

Post by julien_lacour » Wed Nov 20, 2019 10:55 am

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

Post Reply