Item13509: CSS prevents bold fixed-width from working correctly

pencil
Priority: Normal
Current State: Closed
Released In: n/a
Target Release: n/a
Applies To: Engine
Component:
Branches:
Reported By: VickiBrown
Waiting For:
Last Change By: BramVanOosterhout
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:

font-test.png

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:

mono

bold

-- 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
     

    ItemTemplate edit

    Summary CSS prevents bold fixed-width from working correctly
    ReportedBy VickiBrown
    Codebase 2.1.0, 2.0.0
    SVN Range
    AppliesTo Engine
    Component
    Priority Normal
    CurrentState Closed
    WaitingFor
    Checkins
    TargetRelease n/a
    ReleasedIn n/a
    CheckinsOnBranches
    trunkCheckins
    masterCheckins
    ItemBranchCheckins
    Release02x01Checkins
    Release02x00Checkins
    Release01x01Checkins
    I Attachment Action Size Date Who Comment
    font-test.pngpng font-test.png manage 10 K 08 Jul 2015 - 11:14 MichaelDaum  
    fontfaceobserver.jsjs fontfaceobserver.js manage 5 K 11 Oct 2016 - 10:28 BramVanOosterhout Font face observer by Bram Stein https://www.bramstein.com/writing/detecting-system-fonts-without-flash.html
    style_src.csscss style_src.css manage 50 K 11 Oct 2016 - 12:32 BramVanOosterhout Modified style sheet. Replaced font Courier with Consolas and Dejavu Sans Mono
    Topic revision: r10 - 18 Oct 2016, BramVanOosterhout
    The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy