For some reason, computer monitors have been getting wider and wider for years. This puzzles me, since like most people, when I'm working, I tend to use tall narrow documents, both to read and to edit. Sometimes I can arrange things so that I have two panels on the screen, which restores them to a more sensible shape, but the Web is a problem. Web pages seem to have begun adapting to wide monitors by adding wider and wider margins, often filled with ads and/or navigation materials. For me, these margins are often too wide for me to use a two-panel setup (it's just a laptop) but often they leave so much width when used full-screen that the text is tiresomely long. Typesetters have a
rule of thumb that you shouldn't put more than about twelve words on a line because it's hard to read. Fortunately, I found a Chrome hack that lets me solve the problem.
The hack is called
Stylebot, and in practice when there's a page whose rendering is annoying, you click on the little icon and it opens a box that lets you hack that page's CSS. For this particular problem—too-wide text—I pick out the text element and add "
max-width: 50em;". I don't know why everyone doesn't use the
max-width property; I do on this blog, for example, and it is basically designed to solve the problem of too-wide text. I haven't run into many cases where the page is badly mangled by this setting, and it always makes the text easier to read. Wikipedia is the best example, but I solved that one by getting an account and adding the (same) custom CSS to that. But it's so easy to use Stylebot that I can just fix pages on a one-off basis.
 |
I had to max-width both p and li. |
Posts
4 comments:
interesting!
I've got the same problem, but in my case it's because I do most of my browsing on a vertical screen.
I find that modern flat screens have far to few pixels vertically, so I have rotated a couple of them to use in portrait orientation. It's great to be able to read a full page of a PDF without problems, but as you say, many websites are designed for over screens with over a thousand horizontal pixels.
You might be able to solve the problem by convincing websites you're on a tablet or a phone - they often have a mobile version intended for those with tiny (and specifically, narrow) screens. But this is the same problem I have with two-panel use - they fill up the horizontal space with crud.
You can do this with a bookmark (in Firefox and Chrome, at least); I use:
javascript:var%20h=document.getElementsByTagName(%22html%22)[0];void(h.style.maxWidth=%2240em%22);
Thank you, Anne for the post and Adam Sampson for the implementation! This is called a 'bookmarklet' by some. If you take Adam's line and add a bookmark to your browser, call it "Reduce Width" and place the Javascript line in its entirety into the "location" field of the bookmark. I added this bookmark to my toolbar. If a page is too wide, I click the button and the page automatically reformats.
Post a Comment