The future of text layout is not CSS(chenglou.me)
chenglou.me
The future of text layout is not CSS
https://chenglou.me/pretext/editorial-engine/
20 comments
Presumably because the DOM order of the elements is not the actual order of the lines (you can see this with e.g. the blockquotes), so it would be confusing if the user tried to copy the text and saw that all the lines were jumbled up
It's only the blockquotes that are out of order. If this were a valid reason to disable user selection, then no website with a sidebar would have it enabled. Besides, you could just disable user selection on the blockquotes if that were the reason (not that I'd ever recommend that)
That wasn't my experience, when I resized the window and new text showed up, it was completely out of order
Here is the article's text, extracted from the .js source: https://pastebin.com/5uguB0bs
I'm sure this is really smart but boy is this a pain to read. I even tried holding the orbs in hopes of reading the text but it kept reflowing so much that I gave up after 5 minutes.
Edit: I just realized that clicking once freezes the orbs.
Edit: I just realized that clicking once freezes the orbs.
I was clicking and clicking hoping for the reflow madness to stop.
Thanks for this tip -- BTW we need to click _each_ orb.
Occationally a previously untamed orb will start making its presence known until it is stopped. OK I think I have been able to catch every orb now. Now onto read about the future of text layout.
Thanks for this tip -- BTW we need to click _each_ orb.
Occationally a previously untamed orb will start making its presence known until it is stopped. OK I think I have been able to catch every orb now. Now onto read about the future of text layout.
[deleted]
Click the spheres to stop them from moving, so that you can read the text.
I kmow all of the css/js hacks and tricks but the information i need is the screen size in real mm.
Currently i put up a visibility:hidden position:absolute left:-9000px div with nobr, put the first line of text in it, then get the width of it with computed style, calculate the root font size to make it the line exactly the screen width. Then the div is removed and the rest of the content is allowed on the page.
This is the only thing that works.
Currently i put up a visibility:hidden position:absolute left:-9000px div with nobr, put the first line of text in it, then get the width of it with computed style, calculate the root font size to make it the line exactly the screen width. Then the div is removed and the rest of the content is allowed on the page.
This is the only thing that works.
No idea how I'm supposed to read the end of this. But it seems kinda interesting? Not that like, require('fontmetrics') doesn't exist, but it's definitely true that most JS needs more font rendering then the browser seems capable of giving us these days.
This is insane! And so underrated even though it is brand new
A shame there doesn’t seem to be any vertical text support yet
A shame there doesn’t seem to be any vertical text support yet
This sound so smart, but yet falls so short on execution that the article itself adds display:none and overflow:hidden on the elements so I can't even read the article till its end
The demo itself is questionable, why would I want to mix moving elements with static text honestly why ? Break my reading flow + lose my interest in article.
The use case if there is ever one is a very niche that I can think of i.e. you actually want to render block of text on canvas and give all the text rendering properties of DOM to it or some subset of it.
Or some very weird use case where you want to know the exact position of previously rendered item and lay the next item relative to it
Hype to utility ratio is too high, may be he can do better demos, coz this orb shit is disorienting AF
The demo itself is questionable, why would I want to mix moving elements with static text honestly why ? Break my reading flow + lose my interest in article.
The use case if there is ever one is a very niche that I can think of i.e. you actually want to render block of text on canvas and give all the text rendering properties of DOM to it or some subset of it.
Or some very weird use case where you want to know the exact position of previously rendered item and lay the next item relative to it
Hype to utility ratio is too high, may be he can do better demos, coz this orb shit is disorienting AF
am more curious to see if browsers will investigate integrating/moving to https://sluglibrary.com/
I have zero idea what I’m supposed to be looking at? I assume it’s totally broken on mobile.
Seems the entire “blog” is ai generated images. So I assume this is more slop.
Seems the entire “blog” is ai generated images. So I assume this is more slop.
I hesitate to even call this a solution in search of a problem because... Well come on.
A completely useless demo that can't operate on mobile of a way of displaying text that is less functional than every other way of displaying text. Table-based html layouts were better.
Just show the text, there's no problem here.
A completely useless demo that can't operate on mobile of a way of displaying text that is less functional than every other way of displaying text. Table-based html layouts were better.
Just show the text, there's no problem here.
Maybe Markdown?
Yet another "this is the future!" project that completely misunderstands why the present is the way it is.
The website does not work on mobile. If you used CSS you wouldn't have this problem.
The website does not work on mobile. If you used CSS you wouldn't have this problem.
Additionally overflow is hidden, so you cannot read the entire text on desktop without using a very small zoom... and as others have noted, mobile is fully and completely broken. If the bubbles weren't so huge at least you could read a paragraph or two on mobile.
Full of emdashes and AI comparisons like "The performance improvement is not incremental -- it is categorical" too :-\