Item13509: CSS prevents bold fixed-width from working correctly
Priority: Normal
Current State: Closed
Released In: n/a
Target Release: n/a
Applies To: Engine
Component:
Branches:
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,
Bitstream Vera Sans Mono, Normal
Bitstream Vera Sans Mono, Normal
Andale Mono, Normal
Andale Mono, Bold
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