Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add 'monospace' to the <code> font fallback list #1

Merged
merged 2 commits into from

2 participants

@martine

<code> blocks were coming out in a serif font on Linux.

Here's a picture of what the github page looks like on my Linux machines.
http://i.imgur.com/WYhCp.png
You can't rely on any particular font to exist on Linux, so it's best to leave in a generic CSS name as a last fallback.

martine added some commits
@martine martine Add 'monospace' to the <code> font fallback list
<code> blocks were coming out in a serif font on Linux.
094769a
@martine martine Fix "small monospace fonts" workaround to work properly
It's true that to get monospaced fonts to size right, you
need to munge the font fallback list.

http://neugierig.org/software/chromium/notes/2009/09/monospace-fonts-workaround.html

But when a font named "monospace" isn't available, Chrome will fall back
on the next option in the list (serif, in this code), which results in a
serif font for <pre> blocks.

Instead, put a nonexistent font *first* so that it always falls
back to monospace.
ac1e2e4
@martine

I added a second commit to fix a related issue about how WebKit sizes monospaced fonts.

I'm the author of some of peripherally related code in WebKit and the linked blog post so if you have any questions I'd be happy to answer them. (The name "WorkAroundWebKitAndMozilla" isn't special so feel free to shorten it if you want, it just needs to be a nonexistent font.)

@martine

Ping?

@mattgraham
Owner

Sorry @martine its been crazy with the github android app release. I'll take a look at this and get back with you in the next few days. Thanks for the pull request.

@mattgraham mattgraham merged commit a919f68 into mattgraham:master
@mattgraham
Owner

Thanks @martine your pull request has been updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 20, 2012
  1. @martine

    Add 'monospace' to the <code> font fallback list

    martine authored
    <code> blocks were coming out in a serif font on Linux.
  2. @martine

    Fix "small monospace fonts" workaround to work properly

    martine authored
    It's true that to get monospaced fonts to size right, you
    need to munge the font fallback list.
    
    http://neugierig.org/software/chromium/notes/2009/09/monospace-fonts-workaround.html
    
    But when a font named "monospace" isn't available, Chrome will fall back
    on the next option in the list (serif, in this code), which results in a
    serif font for <pre> blocks.
    
    Instead, put a nonexistent font *first* so that it always falls
    back to monospace.
This page is out of date. Refresh to see the latest.
View
2  stylesheets/normalize.css
@@ -187,7 +187,7 @@ pre,
code,
kbd,
samp {
- font-family: monospace, serif;
+ font-family: WorkAroundWebKitAndMozilla, monospace;
_font-family: 'courier new', monospace;
font-size: 1em;
}
View
4 stylesheets/normalize.scss
@@ -208,7 +208,7 @@ pre,
code,
kbd,
samp {
- font-family: monospace, serif;
+ font-family: WorkAroundWebKitAndMozilla, monospace;
_font-family: 'courier new', monospace;
font-size: 1em;
}
@@ -489,4 +489,4 @@ textarea {
table {
border-collapse: collapse;
border-spacing: 0;
-}
+}
View
4 stylesheets/styles.css
@@ -257,7 +257,7 @@ pre,
code,
kbd,
samp {
- font-family: monospace, serif;
+ font-family: WorkAroundWebKitAndMozilla, monospace;
_font-family: 'courier new', monospace;
font-size: 1em;
}
@@ -623,7 +623,7 @@ blockquote {
}
code {
- font-family: "Lucida Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+ font-family: "Lucida Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
color: #efefef;
font-size: 13px;
margin: 0 4px;
View
2  stylesheets/styles.scss
@@ -190,7 +190,7 @@ blockquote {
}
code {
- font-family: 'Lucida Sans', Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+ font-family: 'Lucida Sans', Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
color:#efefef;
font-size:13px;
margin: 0 4px;
Something went wrong with that request. Please try again.