rustdoc: add webfonts and tweak the styles accordingly

[adrientetar]

• Cherry-pick from Tweaked Docs Design #12996
• Use Fira Sans for headlines and sidebar (Light), Heuristica for the body (Adobe Utopia derivative). Both are licensed under the SIL OFL license.
• A few tweaks

Two examples: modified std and modified std::io.

cc #13484
Blocked on rust-lang/prev.rust-lang.org#25 (for hosting of the fonts), that's showcased here.

cc @brson, @thehydroimpulse

[liigo]

{krate}?

[huonw]

This is a format string and is not user-visible, and is formatted via format!("... {krate} ...", krate = crate_name). (crate is a keyword.)

[brson]

@pcwalton do you have an opinion of these fonts?

[huonw]

The background colour for the code blocks blends into the background white colour on my screen (maybe this isn't a problem).

Also, maybe it's just my eyes, but those fonts seem to look a little uneven on my system (firefox nightly, linux x86-64, it looks better in chromium) at the default zoom (you may have to click on this image to get it at the proper size):

[adrientetar]

These fonts are pretty solid. Fira Sans was commissioned by Mozilla for Firefox OS, designed by Spiekermann and Carrois Design based on the successful FF Meta typeface.
Utopia is a long-time design of Adobe. Sold commercially today under the name Utopia Std.

Yes the goal for the background-color was to have a very slight difference. I don't think it changes much in terms of readability.

Configurations I tried are:

• Firefox 28, Windows 7 x64, 27" 1920x1080
• Firefox 28, Ubuntu x64, 22" 1920x1080
• Chrome 33, Windows 8 x64, 13" 1920x1080

What is the res and size of your screen?

[brson]

If Fira is the Firefox OS font then we may not want to co-opt it for Rust.

[brson]

I'm pretty happy with how it looks though.

The background of the code samples is hard to see on my screen too - it's a bit distracting. Maybe a slight border would help again.

[adrientetar]

Okay I will make it a bit darker.

I don't see it as an issue. If anything, this design is a remainder of FF Meta upon which Fira Sans is based, a sans-serif that Spiekermann designed as an antithesis to Helvetica, and that was long before FFOS.

[adrientetar]

Updated with a darker background (please use Ctrl+F5 to refresh cached files).

(I can add back border+roundness but imo, flat design means less clutter.)

[brendanzab]

It would be nice if the search box could be the same width as the body.

Not sure if I'm a fan of the Heuristica for the body copy. Fira is super nice, but looks really light in the sidebar on hi-dpi display - is there a heavier weight you could use? The centering of the sidebar heading is rather ugly - I would prefer left justification if possible... it does conflict with the logo though. :[

[adrientetar]

Updated.

diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
index ccee4f0..1874e4a 100644
--- a/src/librustdoc/html/render.rs+++ b/src/librustdoc/html/render.rs@@ -934,28 +934,8 @@ impl<'a> fmt::Show for Item<'a> {
None => {}
}
- if self.cx.include_sources {- let mut path = Vec::new();- clean_srcpath(self.item.source.filename.as_bytes(), |component| {- path.push(component.to_owned());- });- let href = if self.item.source.loline == self.item.source.hiline {- format!("{}", self.item.source.loline)- } else {- format!("{}-{}", self.item.source.loline, self.item.source.hiline)- };- try!(write!(fmt.buf,- "<a class='source'- href='{root}src/{krate}/{path}.html\\#{href}'>\- [src]</a>",- root = self.cx.root_path,- krate = self.cx.layout.krate,- path = path.connect("/"),- href = href));- }-
// Write the breadcrumb trail header for the top
- try!(write!(fmt.buf, "<h1 class='fqn'>"));+ try!(write!(fmt.buf, "\n<h1 class='fqn'>"));
match self.item.inner {
clean::ModuleItem(ref m) => if m.is_crate {
try!(write!(fmt.buf, "Crate "));
@@ -978,9 +958,30 @@ impl<'a> fmt::Show for Item<'a> {
try!(write!(fmt.buf, "<a href='{}index.html'>{}</a>::",
trail, component.as_slice()));
}
- try!(write!(fmt.buf, "<a class='{}' href=''>{}</a></h1>",+ try!(write!(fmt.buf, "<a class='{}' href=''>{}</a>",
shortty(self.item), self.item.name.get_ref().as_slice()));
+ if self.cx.include_sources {+ let mut path = Vec::new();+ clean_srcpath(self.item.source.filename.as_bytes(), |component| {+ path.push(component.to_owned());+ });+ let href = if self.item.source.loline == self.item.source.hiline {+ format!("{}", self.item.source.loline)+ } else {+ format!("{}-{}", self.item.source.loline, self.item.source.hiline)+ };+ try!(write!(fmt.buf,+ "<a class='source'\+ href='{root}src/{krate}/{path}.html\\#{href}'>\+ [src]</a>",+ root = self.cx.root_path,+ krate = self.cx.layout.krate,+ path = path.connect("/"),+ href = href));+ }+ try!(write!(fmt.buf, "</h1>\n"));+
match self.item.inner {
clean::ModuleItem(ref m) => {
item_module(fmt.buf, self.cx, self.item, m.items.as_slice())
diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css
index 41a3091..0db346b 100644
--- a/src/librustdoc/html/static/main.css+++ b/src/librustdoc/html/static/main.css@@ -12,8 +12,8 @@
@font-face {
font-family: 'Fira Sans';
font-style: normal;
- font-weight: 300;- src: local('Fira Sans Light'), url("http://rust-lang.org/fonts/FiraSans-Light.woff") format('woff');+ font-weight: 400;+ src: local('Fira Sans'), url("http://rust-lang.org/fonts/FiraSans-Regular.woff") format('woff');
}
@font-face {
font-family: 'Fira Sans';
@@ -52,13 +52,12 @@
body {
color: #333;
- min-height: 100%;
min-width: 500px;
- height: 100%;
font: 18px "Heuristica", "Helvetica Neue", Helvetica, Arial, sans-serif;
- line-height: 150%;+ line-height: 1.4;+ margin: 0;
position: relative;
- height: auto;+ padding: 10px 15px 20px 15px;
padding-bottom: 20px;
}
@@ -78,7 +77,7 @@ h2, h3, h4 {
h2 code, h3 code, h4 code, .block a {
font-size: 1.2em;
}
-h1, h2, h3, h4, section.sidebar, a.source {+h1, h2, h3, h4, section.sidebar, a.source, .content a, .search-input {
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@@ -86,8 +85,12 @@ ul {
padding-left: 25px;
}
+p {+ margin: 0 0 1em 0;+}+
code, pre {
- font-family: Menlo, Monaco, Consolas, "Inconsolata", "DejaVu Sans Mono", monospace;+ font-family: Menlo, Monaco, Consolas, Inconsolata, "DejaVu Sans Mono", monospace;
}
pre {
font-size: 15px;
@@ -151,7 +154,7 @@ nav.sub {
}
.content {
- padding: 20px 40px;+ padding: 20px 0;
}
.content pre { padding: 20px; }
@@ -201,10 +204,9 @@ nav.sub {
.docblock h2 { font-size: 1.15em; }
.docblock h3, .docblock h4, .docblock h5 { font-size: 1em; }
-.content .source { +.content .source {
float: right;
- font-weight: 500;- padding: 9px 15px;+ font-size: 23px;
}
.content table {
@@ -260,7 +262,7 @@ nav.sum { text-align: right; }
nav.sub form { display: inline; }
nav, .content {
- margin-left: 220px;+ margin-left: 230px;
}
a {
@@ -290,18 +292,18 @@ a {
margin-top: 5px;
padding: 10px 16px;
font-size: 17px;
- font-weight: 300;
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
- transition: background-color 50ms linear;- transition: border 500ms ease-out;- transition: box-shadow 500ms ease-out;+ transition: border-color 300ms ease;+ transition: border-radius 300ms ease-in-out;+ transition: box-shadow 300ms ease-in-out;
}
.search-input:focus {
border-color: #66afe9;
+ border-radius: 2px;
border: 0;
outline: 0;
- box-shadow: 0 0 0 1px #078dd8, 0 0 0 2px #078dd8;+ box-shadow: 0 0 8px #078dd8;
}
.search-results .desc {
@@ -397,7 +399,6 @@ h6.section-link:hover a:after {
}
nav.sub {
- width: 85.5%;
margin: 0 auto;
}
}
\ No newline at end of file

[brson]

Thanks, @adrientetar and @thehydroimpulse. This is looking good. Do follow up with additional tweaks as necessary.

[tomjakubowski]

Is there a particular reason the fonts are referenced using http:// URLs and not bundled in a directory relative to main.css itself? It makes viewing offline documentation (e.g. those shipped with the Linux nightlies) somewhat painful.

[adrientetar]

@tomjakubowski That's right, we will have to consider packaging the fonts in the repo.