A few typographic properties

[shaunlebron]

Nice project! There are a few typographic properties that Chrome and Firefox haven’t prioritized (after a decade!), so maybe adding them to dropflow would finally let us render near print-quality text on the web. They seem straightforward to me, but would it be a lot of work?

feature	CSS property	Safari	Chrome	Firefox
Drop capitals	initial-letter	✔️	✔️	❌
Hanging indent	text-indent with hanging and each-line	✔️	❌	✔️
Hanging punctuation	hanging-punctuation	✔️	❌	❌
Orphans	orphans	✔️	✔️	❌

Examples

Drop capitals:

Hanging indent:

Hanging punctuation:

[chearon]

Oh yeah, these would be great. Hanging punctuation is something I've wanted to do. I cannot think of anything which would make that, drop capitals, or hanging indent difficult.

Fragmentation for pages (#7) is a high priority, so I'll think about orphans when I do that. It's a big project though.

Dropflow can actually render HTML to HTML, so it could be used as a way to experiment with features that aren't in browsers yet. Not sure if it'd be wise to use in production or not, but it's at least interesting.

[shaunlebron]

Great! And oops, I meant text-wrap: balance instead of orphans, which prevents single-word lines at the end of a paragraph.

Oh interesting, I see the paintToHtml function now. This is more than “amusing” actually! If these typography features were available, I’d prefer it over paintToCanvas just for selecting text.

I’m open to helping. Would implementing this feature require much study of what you’ve built so far?

[chearon]

text-wrap: balance

That one I haven't given much thought yet. I think it involves normal layout and then another pass to refill the same line boxes (with something like Knuth-Plass?). Could be hard.

I'm also about to release paintToSvg which should allow text selection. But yeah, maybe it is useful!

I’m open to helping. Would implementing this feature require much study of what you’ve built so far?

Drop capitals I think involves generating a new box type and shortening lines probably via the same mechanism floats use (FloatContext) so that one is a bit deep. Indent (especially starting) might be a good first feature, since you just add whitespace to brand new lines. Hanging punctuation would leverage the same mechanism used for leading and trailing whitespace (see LineWidthTracker), so shouldn't be too bad — except that positioning the punctuation is harder. I'll post more details if you're interested in any of those; I'd love to get some contributors. I'm also working on adding a lot more comments right now.