doc: rewrite font sizes, add viewport meta by silverwind · Pull Request #15660 · nodejs/node

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

-
 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 994dee1Compare September 28, 2017 17:36

doc: rewrite font sizes, add viewport meta
675777e

silverwind force-pushed the doc-font-sizes branch from 994dee1 to 675777eCompare 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

Uh oh!

Uh oh!

Conversation

silverwind commented Sep 28, 2017• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Affected core subsystem(s)

Uh oh!

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:

Uh oh!

silverwind commented Sep 29, 2017

Uh oh!

larsch commented Sep 29, 2017

Uh oh!

silverwind commented Sep 29, 2017• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Sep 29, 2017• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fhembergerSep 30, 2017

Choose a reason for hiding this comment

Uh oh!

silverwindSep 30, 2017

Choose a reason for hiding this comment

Uh oh!

larsch commented Sep 30, 2017

Uh oh!

lpinca commented Oct 1, 2017

Uh oh!

silverwind commented Oct 2, 2017

Uh oh!

refack commented Oct 2, 2017

Uh oh!

Fishrock123 commented Oct 3, 2017

Uh oh!

lpinca commented Oct 3, 2017

Uh oh!

silverwind commented Oct 3, 2017

before

after

Uh oh!

lpinca commented Oct 4, 2017

Uh oh!

refack commented Oct 5, 2017

Uh oh!

silverwind commented Oct 6, 2017

before

after

Uh oh!

silverwind commented Oct 9, 2017

Uh oh!

silverwind commented Oct 10, 2017

Uh oh!

MylesBorins commented Nov 15, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

silverwind commented Sep 28, 2017•
edited
Loading

silverwind commented Sep 29, 2017•
edited
Loading

silverwind commented Sep 29, 2017•
edited
Loading