I had a weird experience with Google Groups recently - I zoomed in because the text was too small and ... the page resized the viewport to its original pixel size even though the font was scaling. Ended up with about 10 characters in an unscrollable viewport. HILARIOUS.
> - Poor document structure that renders at the whole width of wide screens ...
Does everyone just use their browser full screen now? I never want super-wide text, but I can always narrow my browser window or switch to portrait mode if I'm using a phone or tablet.
I just checked hn, and it lets text get too wide to comfortably read, but stops somewhere before full screen width.
Off-topic: That website sets font size in `vw` (viewport width percentage). This is horrible: Text is way too large on maximized desktop browsers, and zooming the page doesn't change that, but only causes a weird jump in position.
> That doesn't help much for folks who read with their browser window maximized.
They should install proper window manager, then. (I use GridMove.) I for example use only half of the screen for the browser and sometimes it's annoying, because the content is exactly couple letters too wide. Why should web designers force their width of screen on everybody?
> In particular, by default stuff is really small on mobile screens, you have to zoom around.
That's just because mobile browsers are intentionally broken by default. All you need to get them back to sanity is the following element in your <head>:
I had the opposite problem with a web page the other day. When I zoomed in, the text resized itself to still fit the same amount of text in the viewport, but since other elements would zoom correctly, the more I zoomed in, the smaller the text got.
Some of us consider it a feature that a website allows the reader to freely resize the browser window (and the text with-in) to the width they consider comfortable.
> lots of JS libraries expect things like viewport and window size information, I wonder how Google is achieving that.
Just plug in common screen parameters (e.g. 1920x1080, 1366x768, ...) and analyze it as if it were the result you'd get by default with Chrome on such a screen, I would imagine.
> text that is too wide causes people to read less comfortably and retain less information.
Does not justify wasted padding space as the user can more easily set the text to the appropriate zoom than applying custom CSS. This feels like an attempt to force JS to enable ads & what should be default fullscreen button in the bottom right. Zooming in now decreases the padding on the right, but has an offsetting increase in the wasted padding on the left contents until it completely disappears with huge text.
On all my computers? And my phone? And my tablet? And my...
You could say the same about sites where the body text is set unreadably small. "Just zoom in!" It does not persist across devices, sessions, users etc the way a well-designed site would.
>It looks like you disabled Chrome's resizing on purpose too, which seems unnecessary/annoying. Why break existing functionality just to add new functionality?
That functionality can be re-enabled by changing the "resize" CSS style[0].
We just went through this like a week or two ago. Yeesh. Every browser I use has support for text resizing, default text sizes, or zoom levels. Android WebKit has double-tap and reflow.
I don't see why this is a problem demanding such rants.
Ironically the first thing I did when the page loaded was tap Ctrl+- Ctrl+-.
> Sometimes I’m on my computer, and Reader doesn’t work on your web app. I hit CMD + two or three times... then the layout falls apart.
In ML, in Safari, double tap a text column with two fingers. It will zoom the text to fill browser width, just like the double tap with one finger on an iPhone or iPad.
The browser will zoom into that column without changing layout, and then re-render the page to make the text full resolution. Scroll will be lightly tied to the newly zoomed column.
Double tap with two fingers again to zoom back out to full page width.
Still, agree with the premise. Designs should anticipate text size of "content" areas being changed by the user, and the layout should support reflow of arbitrary text size changes without breaking.
> On my large screen, the lines are so long that it's difficult to read.
The text on the page adapts to the width of the browser window in which it is viewed. The result is that everyone can obtain the line width they prefer by adjusting the width of their local browser that is rendering the page.
If the lines are too long, just pop the page out into its own window, narrow the width of just that window until the lines are at a comfortable length for you, and you'll have lines that are just right for you. This page is an example of where you are in control of how the site renders and can easily adjust it to your own tastes.
> I think your solution is very close but breaks when I scale down the width of my viewport. If I set Chrome dev to iPhone 12 Pro or iPhone SE, for example, the chess board starts getting cut off.
Hmm... what would you like it to do in that case? Start shrinking the height? You can try adding `max-width: 100%` to the tall rectangle.
I had a weird experience with Google Groups recently - I zoomed in because the text was too small and ... the page resized the viewport to its original pixel size even though the font was scaling. Ended up with about 10 characters in an unscrollable viewport. HILARIOUS.
reply