Hacker News Reader

Comment by pcwalton | Hacker News Reader

> Is there a reason browsers don't have decent line breaking algorithms yet that make paragraph text look better than the current "left" and "justified" CSS alignments? I miss the way LaTeX lays out text.

The CSS model supports floats, while TeX doesn't. Floats make the problem much more difficult, because floats can have ceilings anywhere within a block, and placing a float reduces the amount of space available for an arbitrary number of lines below it. To make matters worse, the spec requires that floats be placed as high as possible, so browsers aren't free to move the floats around to try to minimize raggedness.

View on HN

FWIW TeX has \parshape

Parshape isn't as expressive as the CSS float model, because the entire shape of the paragraph has to be specified up front. CSS floats, though, effectively change the shape of the block as the block is laid out.

I'd argue it is just different. CSS floats really only deal with square shapes, still. (I could be behind on this point, not something I've cared to do in... well, ever. :( )

Quickly googling for the example from the TeX-book of the text in a circle doesn't give anything similar for html.

It's true that there's no feature that directly corresponds to parshape. (This is what the ill-fated CSS Regions spec was for; the problem with it is that it was far too expressive to the point of becoming near-unimplementable.)

However, I believe you can simulate parshape by just stacking line-sized floats on top of one another and using clear to stack them vertically. This should give you just as much expressivity as parshape.

See this jsfiddle I threw together quickly (floats in blue to show how the technique works): https://jsfiddle.net/vve89j06/4/

I think the advantage TeX has here is only over HTML. Specifically, that it is a full programming language. Well, mostly full. Adding in JavaScript and I don't know how the web couldn't do these things. Some of the abstractions will make it harder, of course. But some will make it easier, too.

Rectangle vs circle isn't the point of this thread, as I understand it. It’s that the calculated width of text determines the width of a float when the float has no specified width. Here is a fiddle demonstrating what I understood people were talking about regarding floats, although it is a different thing than the other jsfiddle in this thread is showing: https://jsfiddle.net/1wj3efkm/

Also, everything on the web is a rectangle, but that hasn't stopped people from hacking around this (https://meyerweb.com/eric/css/edge/slantastic/demo.html), and there is even a draft web standard to give shape to text (https://drafts.csswg.org/css-exclusions-1/), but only Microsoft has implemented it (https://caniuse.com/#feat=css-exclusions).

The width of the float not being fixed seems like a massive goal post shift. Unnecessarily so, honestly.

That said, this problem doesn't seem that much harder, honestly. Each float has a max size. They are only smaller if they had less text.

And see the example in the TeX-book. Basically a circular cutout for text aligned on a circle. Both parts fully hyphenated to fill the outline. I'm on my phone, but will try and find an example, if it would help.

Reply on news.ycombinator.com