search

marijnh / Eloquent-JavaScript

The sources for the Eloquent JavaScript book
https://eloquentjavascript.net
3.01k stars 795 forks source link

Make preformatted text wrap #393

Closed skotniczny closed 6 years ago

skotniczny commented 6 years ago

Issue #174

Also font-size respect the user's font settings.

marijnh commented 6 years ago

Thanks. Why did you drop the media query? I think having a smaller font is generally preferable to having code wrap, which tends to make it hard to read.

skotniczny commented 6 years ago

I assume that readers can change the font size on their devices, and the difference between 20 px regular text and 10 px pre text seems too big for me.

[20 px regular, 14 px pre vs 20 px regular, 10 px pre] calibre

However, I thought about it and fixed it a bit. It looks quite good, I attach few screenshots from my devices.

Kindle 7 portrait, Kindle 7 landscape, Paperwhite 3 portrait, Paperwhite 3 landscape

marijnh commented 6 years ago

I agree that looks good. I'm using a max line length of 61 characters in the examples—does the 35em in the query cause the font to shrink at about the point where such a line becomes too long on typical default font sizes?

skotniczny commented 6 years ago

I use this value because at eloquentjavascript.net article max-width is 35 em (pre text font-size in e-book is 80%, but it assumes some default margins around page). There are screenshots of long lines: Paperwhite portrait, Kindle 7 portrait, Kindle 7 landscape

marijnh commented 6 years ago

The lines are wrapped in the Kindle 7 portrait screenshot—there's a lot of lines at or near the max length in the book, it'd be nice if they didn't wrap on popular platforms. Maybe just reduce the font size by another 5%?

skotniczny commented 6 years ago

I would prefer the reader decrease font size (size "2" setted, pre 70%), but I understand your point, 65 percent is still better than 50.

Default font size "3", pre 65%: screenshot_2018_03_07t01_06_28 0159

marijnh commented 6 years ago

Wonderful. Merged as 6bd984f7ca05...3f0e331ea359

skotniczny commented 6 years ago

Finally, we stayed at 70%, because I didn't push the last change, but I looked at it again and I found such small (65%) font on 6-inch e-ink display was unreadable and that's why in my opinion it's better to break lines.

marijnh commented 6 years ago

Fair enough. I guess people can turn usually their devices if the wrapped lines bother them.