Item13509: CSS prevents bold fixed-width from working correctly

Bold fixed width text should be possible using any of

• ==bold text==
• <tt><b>bold text</b></tt>
• <pre>bold text</pre>
• ...

However, the CSS for fixed width text prevents this as "Bitstream Vera Sans Mono" and "Andale Mono" can't do bold.

pre, code, tt {
  font-family: "Bitstream Vera Sans Mono","Andale Mono",Courier,monospace;
}

Test

Code		Result
Text	==Bold Text==	Text	Bold Text
Text	<tt><b>Bold Text</b></tt>	Text	Bold Text

Forcing Courier

Using <pre style="font-family: Courier;">

Text
Bold Text

-- VickiBrown - 06 Jul 2015

Hm,

Looks like this on my screen:

Which seems fine besides my system not having "Bitstream Vera Sans Mono". However "Andale Mono" is just fine bold.

Alternatively, we could use google web fonts like this:

-- MichaelDaum - 08 Jul 2015

I'm confused. Is this a "No Action" or is there an issue here. Please either confirm or set to no action. Thanks

-- GeorgeClark - 25 Sep 2016

The css font-family rule for pre is

"Bitstream Vera Sans Mono","Andale Mono",Courier,monospace

If your system doesn't the corresponding bold font sets installed, then this is not a problem of Foswiki itself. If it doesnt have "Bitstream Verdana" nor "Andale Mono" installed, then it will default to Courier anyway.

I can't see an issue here, cannot verify the report, nor is there enough information provided how to do so. Please reopen in case the issue still persists on your end as well as a sufficient screenshot of above test.

-- MichaelDaum - 11 Oct 2016

As Michael said in his comment the issue is that the Bitstream Vera Sans Mono and Andane Mono fonts are not available at Foswiki. I demonstrate that below with some code borrowed from Bram Stein's website ( July 30, 2015).

Since the first two fonts are not available, the style falls back to Courier. It is bold, but Courier bold is not very pronounced. Courier is not a good fall back, as it is a serif font, not a sans-serif. It would be better to fall back to Consolas and Dejavu Sans Mono. The style would change to:

<style type="text/css">
pre, code, tt {
  font-family: "Bitstream Vera Sans Mono","Andale Mono",Consolas,"Dejavu Sans Mono",monospace;
}
</style>

There are not many widely available mono spaced sans-serif fonts available. I believe the two above are superior to Courier. The change is in PatternSkinTheme/style_src.css and I have attached a modified version should you care to implement this.

-- BramVanOosterhout - 11 Oct 2016

Yes and no.

You basically shouldn't rely on fonts being installed on the users' desktop or mobile device. That's why we have web fonts, thankfully supported by all browsers as of today. Just have a look at available monospace san-serif fonts. All of them are freely usable. There even is WebFontsContrib shipping some of these without "having" to use a CDN.

-- MichaelDaum - 11 Oct 2016

Fair enough.

The example above would be better presented as:

%STARTINCLUDE%
| *Regular text* | *Bold text* | 
| =Regular=      | ==Bold== |
| <pre> Text </pre> | <pre> <b>Bold</b> </pre> |
| <tt> Text </tt> | <tt> *Bold* </tt> |
%STOPINCLUDE%

Regular text	Bold text
Regular	Bold
Text	Bold
Text	Bold

Showing clearly that the issue is the fallback to the serif Courier font.

And not: "Bitstream Vera Sans Mono" and "Andale Mono" can't do bold.

I have closed the task as per your suggestion. I will install a nice monospaced, sans-serif font on my installation.

-- BramVanOosterhout - 18 Oct 2016https://foswiki.org/bin/edit/Tasks/Item13509#save

Commenting is disabled while not logged in