4 ms·
I wanted to make a simple, fast loading site to put essays on. I thought, "Surely modern browsers render html 5 with these fancy new article tags on any device
by drblast 10y ago
I wanted to make a simple, fast loading site to put essays on. I thought, "Surely modern browsers render html 5 with these fancy new article tags on any device in a readable format, right?"
Nope. Not at all. Shockingly bad.
"But at least there's a CSS way to limit paragraph width to a reasonable number of words or letters that works on any device and that degrades gracefully without resorting to Javascript, right?"
No again.
LaTeX does this exact thing and has for years. Why is this so damn hard?
- lucb1e 10y agoWhat's wrong with body{width:600px;} and a viewport setting of, from memory, initial scale 1 and width 600? Works for me on every device.
- flukus 10y agomax-width would probably be better for mobile/small screens.
- robert_tweed 10y agoOr even better, {max-width: 35em;}
- jff 10y agoI do this on my personal site and it seems to Just Work. I specify a max-width for my content, specify font sizes in em values, and it looks fine on every browser I've ever tried, even a shitty Chinese cellphone (not smartphone).
- lucb1e 10y agoWhy is that better?
- Nadya 10y agoIf a user sets their default font size to 26px, then a max-width of 600px may be too small... if a user sets their font size to 10px then 600px may be too wide. A value of 35em would scale the container based on the user's selected font size. Containers should be relative to their content.
- lucb1e 10y agoMakes sense. Thanks!
- whyever 10y agoLatex does not render in real time.
- sigstoat 10y agothe core knuth-plass line breaking algorithm is probably less computationally intensive than whatever nuttery is being performed by the CSS layout engine.