4 ms·
Anyone have any ideas about making an 80-character-wide, plaintext-style website responsive? I really like the style, but it doesn't work well on phones.
by vehemenz 6y ago
Anyone have any ideas about making an 80-character-wide, plaintext-style website responsive?
I really like the style, but it doesn't work well on phones.
- anotheryou 6y agoin CSS you can do "max-width: 40ch" on smaller devices if you want. For fancy decorations you'd need need to draw them with css and/or pseudo elements. pre{ max-width: 40ch !important; white-space: normal; }
- vehemenz 6y agoGood idea. I didn't know about ch units. I experimented with setting a fixed vw width, which kinda works, but at the end of the day 80 characters is probably just too much.
- anotheryou 6y agoOn desktop I force most text to be 60ch width max. Breaks a few sites but overall as great for HN comments for example. *:not(#tinymce) p{ max-width: 60ch !important; }
- giantrobot 6y agoSo long as you're actually using HTML (and not literal plain text) all you need to do is add a viewport meta tag: <meta name="viewport" content="width=device-width"> Mobile browsers set the viewport width to a default of 960px (Android might be a little different from iOS). That's why a plain text file displays so poorly on mobile. It's rendering to a pixel width larger than the display (and zoomed to fit). For the "plain text" look set the font family to monospace. Bam readable and responsive "plain text" look.