doc: rewrite font sizes, add viewport meta #15660

silverwind · 2017-09-28T17:27:02Z

Checklist

make -j4 test (UNIX), or vcbuild test (Windows) passes
commit message follows commit guidelines

Affected core subsystem(s)

doc

Rewrote pretty much all font size definitions in the docs CSS. The viewport meta lets mobile browsers know the site is mobile-ready, which made most of the font size hacks obsolete.

I converted most em units to rem because cascaded font sizes can lead to unwanted surprises. I retained a 90% size on monospace fonts because they appear to be more in-line with the variable width font. I also resolved a few issues that I've noticed surrounding the version selection dropdown, and one issue of a heading layout overflow.

Screenshots at various widths:

Obsoletes: #15436

larsch · 2017-09-29T08:02:22Z

Looks great for me on desktop, also when resizing the window.

Monospace font is strangely small on Chrome on Android (same problem i had with my attempts).

Everything is small on Firefox on Android.

Screenshots below.

Android, Chrome, silverwind:doc-font-sizes:

Android, Chome, current nodejs.org:

Android, FireFox, silverwind:doc-font-sizes:

Android, FireFox, current nodejs.org:

silverwind · 2017-09-29T08:25:36Z

Try clearing your browser cache on Android, you might not be getting the updated CSS file.

larsch · 2017-09-29T08:40:45Z

I believe I have done that now, but with same result. Server log claims to have sent full .css to mobile.

silverwind · 2017-09-29T21:50:49Z

@larsch: it works flawlessly on my Android 7. Try deleting your build files, IIRC there's some kind of bug where they are not refreshed sometimes:

rm -rf out/doc/api && make doc-only && http-server out/doc/api

And if you're on mobile Chrome, make sure to clean your cache in the privacy settings.

silverwind · 2017-09-29T21:56:35Z

I opted to not increase mobile font size because the default 1rem (which is usually 16px) looks fine to me. Also, I included overflow-wrap to fix all cases where long lines could break the layout horizontally.

Here's a current rendering:

cc: @nodejs/website

fhemberger · 2017-09-30T05:43:16Z

doc/api_assets/style.css

 pre, tt, code, .pre, span.type, a.type {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
+  font-size: .9em;


No rem here?

This is the one place where em is needed so it does not dramatically downsize code tags inside headings (which can be up to 2rem, and a .9rem code tag would look very bad in them).

larsch · 2017-09-30T10:09:32Z

@silverwind: Deleting the build files did the trick. Now it looks good on my Android too!

lpinca · 2017-10-01T15:15:19Z

h5 looks smaller than p.

silverwind · 2017-10-02T21:37:25Z

@lpinca Ah, a case of bad UA defaults. I fixed it by copying the sizes that bootstrap uses:

refack · 2017-10-02T22:21:44Z

Preview available at http://node.refack.com.s3.amazonaws.com/index.html

Fishrock123 · 2017-10-03T01:01:42Z

will try to review soon, assigning to try and remember

lpinca · 2017-10-03T06:12:13Z

Headings look good now. I noticed a minor issue on the sidebar that triggers my OCD, see screenshots below.

Before

Now

The Node.js text is not aligned with the list items and is a lot smaller than before. It has the same size of the items.

silverwind · 2017-10-03T17:03:46Z

@lpinca fixed, thanks:

before

after

lpinca · 2017-10-04T16:49:34Z

Took another look. Another thing I noticed is that the changelog history text now has the same size of the normal text. It was smaller before.

Before

Now

refack · 2017-10-05T03:32:31Z

Updated http://node.refack.com/index.html

silverwind · 2017-10-06T13:12:55Z

@lpinca fixed, I restored the old font size. It looked okay with 1rem to me, but I guess it makes more sense to have it smaller.

before

after

silverwind · 2017-10-09T18:43:41Z

Did some more minor tweaks, latest version here: https://silverwind.io/api/

I'll likely land this tomorrow unless there are objections.

This makes the docs much more mobile-friendly by adding a viewport meta tag which makes mobile browers properly scale fonts. Additionally the font sizes have been cleaned up to use `rem` units where possible. Also included are some fixes for the version dropdown. PR-URL: #15660 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Luigi Pinca <luigipinca@gmail.com>

silverwind · 2017-10-10T19:29:37Z

Thanks. Landed in 6d9654b.

This makes the docs much more mobile-friendly by adding a viewport meta tag which makes mobile browers properly scale fonts. Additionally the font sizes have been cleaned up to use `rem` units where possible. Also included are some fixes for the version dropdown. PR-URL: nodejs/node#15660 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Luigi Pinca <luigipinca@gmail.com>

Fix a line-height issue introduced in nodejs#15660 where paragraphs containing <code> blocks would have unequal line heights. Fixes: nodejs/nodejs.org#1399

Fix a line-height issue introduced in #15660 where paragraphs containing <code> blocks would have unequal line heights. Fixes: nodejs/nodejs.org#1399 PR-URL: #16200 Reviewed-By: Gireesh Punathil <gpunathi@in.ibm.com> Reviewed-By: Luigi Pinca <luigipinca@gmail.com> Reviewed-By: Yuta Hiroto <hello@about-hiroppy.com> Reviewed-By: Vse Mozhet Byt <vsemozhetbyt@gmail.com> Reviewed-By: Tobias Nießen <tniessen@tnie.de>

This makes the docs much more mobile-friendly by adding a viewport meta tag which makes mobile browers properly scale fonts. Additionally the font sizes have been cleaned up to use `rem` units where possible. Also included are some fixes for the version dropdown. PR-URL: #15660 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Luigi Pinca <luigipinca@gmail.com>

Fix a line-height issue introduced in #15660 where paragraphs containing <code> blocks would have unequal line heights. Fixes: nodejs/nodejs.org#1399 PR-URL: #16200 Reviewed-By: Gireesh Punathil <gpunathi@in.ibm.com> Reviewed-By: Luigi Pinca <luigipinca@gmail.com> Reviewed-By: Yuta Hiroto <hello@about-hiroppy.com> Reviewed-By: Vse Mozhet Byt <vsemozhetbyt@gmail.com> Reviewed-By: Tobias Nießen <tniessen@tnie.de>

MylesBorins · 2017-11-15T19:19:44Z

This does not land cleanly in v6.x LTS. Please feel free to manually backport by following the guide. Please also feel free to replace do-not-land if it is being backported

nodejs-github-bot added the doc Issues and PRs related to the documentations. label Sep 28, 2017

silverwind mentioned this pull request Sep 28, 2017

doc: maintain font size in narrow windows #15436

Closed

1 task

silverwind force-pushed the doc-font-sizes branch 2 times, most recently from cac3c18 to 994dee1 Compare September 28, 2017 17:36

doc: rewrite font sizes, add viewport meta

675777e

silverwind force-pushed the doc-font-sizes branch from 994dee1 to 675777e Compare September 28, 2017 20:27

silverwind mentioned this pull request Sep 29, 2017

doc: fix style bug on version link dropdown #15671

Closed

3 tasks

silverwind added 2 commits September 29, 2017 23:45

add overflow-wrap to prevent layout issues on mobile

c78b502

don't increase mobile font size, 16 is actually fine

f4a737a

fhemberger reviewed Sep 30, 2017

View reviewed changes

adjust heading sizes

724f345

Fishrock123 self-assigned this Oct 3, 2017

fix font size and margin on title in sidebar

6a3c216

lpinca mentioned this pull request Oct 3, 2017

Improve doc readability nodejs/nodejs.org#919

Closed

restore metadata font size

64254ae

lpinca approved these changes Oct 6, 2017

View reviewed changes

jasnell approved these changes Oct 9, 2017

View reviewed changes

increase heading margins, increase metadata font size

23b5504

silverwind closed this Oct 10, 2017

silverwind deleted the doc-font-sizes branch October 10, 2017 19:29

fhemberger mentioned this pull request Oct 14, 2017

Possible line spacing issue in nightly docs nodejs/nodejs.org#1399

Closed

silverwind added a commit to silverwind/node that referenced this pull request Oct 14, 2017

doc: fix paragraph line-height issue

3ad3f8a

Fix a line-height issue introduced in nodejs#15660 where paragraphs containing <code> blocks would have unequal line heights. Fixes: nodejs/nodejs.org#1399

silverwind mentioned this pull request Oct 14, 2017

doc: fix paragraph line-height issue #16200

Closed

2 tasks

MylesBorins added the backport-requested-v6.x label Nov 15, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doc: rewrite font sizes, add viewport meta #15660

doc: rewrite font sizes, add viewport meta #15660

silverwind commented Sep 28, 2017 •

edited

Loading

larsch commented Sep 29, 2017

silverwind commented Sep 29, 2017

larsch commented Sep 29, 2017

silverwind commented Sep 29, 2017 •

edited

Loading

silverwind commented Sep 29, 2017 •

edited

Loading

fhemberger Sep 30, 2017

silverwind Sep 30, 2017

larsch commented Sep 30, 2017

lpinca commented Oct 1, 2017

silverwind commented Oct 2, 2017

refack commented Oct 2, 2017

Fishrock123 commented Oct 3, 2017

lpinca commented Oct 3, 2017

silverwind commented Oct 3, 2017

lpinca commented Oct 4, 2017

refack commented Oct 5, 2017

silverwind commented Oct 6, 2017

silverwind commented Oct 9, 2017

silverwind commented Oct 10, 2017

MylesBorins commented Nov 15, 2017

doc: rewrite font sizes, add viewport meta #15660

doc: rewrite font sizes, add viewport meta #15660

Conversation

silverwind commented Sep 28, 2017 • edited Loading

Checklist

Affected core subsystem(s)

larsch commented Sep 29, 2017

Android, Chrome, silverwind:doc-font-sizes:

Android, Chome, current nodejs.org:

Android, FireFox, silverwind:doc-font-sizes:

Android, FireFox, current nodejs.org:

silverwind commented Sep 29, 2017

larsch commented Sep 29, 2017

silverwind commented Sep 29, 2017 • edited Loading

silverwind commented Sep 29, 2017 • edited Loading

fhemberger Sep 30, 2017

Choose a reason for hiding this comment

silverwind Sep 30, 2017

Choose a reason for hiding this comment

larsch commented Sep 30, 2017

lpinca commented Oct 1, 2017

silverwind commented Oct 2, 2017

refack commented Oct 2, 2017

Fishrock123 commented Oct 3, 2017

lpinca commented Oct 3, 2017

silverwind commented Oct 3, 2017

before

after

lpinca commented Oct 4, 2017

refack commented Oct 5, 2017

silverwind commented Oct 6, 2017

before

after

silverwind commented Oct 9, 2017

silverwind commented Oct 10, 2017

MylesBorins commented Nov 15, 2017

silverwind commented Sep 28, 2017 •

edited

Loading

silverwind commented Sep 29, 2017 •

edited

Loading

silverwind commented Sep 29, 2017 •

edited

Loading