CSS text-indent

[jgraham]

Description

CSS text-indent would be more widely useful to authors if all the values, including the 'hanging' and 'each-line' keywords added in CSS Text 3, were interoperable across browsers. Currently only Safari ships these extensions, so authors cannot depend on them (or, users of non-Safari browsers may see a degraded layout if they are used).

Specification

https://drafts.csswg.org/css-text-3/#text-indent-property

Open Issues

No response

Tests

https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=text-indent, except for the tests under css-typed-om.

Current Implementations

• [ ] Blink
• [x] Gecko
• [X] WebKit

Standards Positions

No response

Browser bug reports

https://bugzilla.mozilla.org/show_bug.cgi?id=784648

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[jgraham]

CC @jfkthame

[foolip]

Part of this (at least text-indent: hanging) was behind a flag in Chromium for a long time, before eventually being removed, see https://crbug.com/248894. There was no reaction on the bug when that happened.

Do we have signals of web developer demand for this? Or are there sites that use it that don't work as well in Chrome and Firefox because of missing support?

[jfkthame]

Do we have signals of web developer demand for this?

Maybe @jensimmons would know something about this, or could consult the formerly-known-as-twitter-verse for opinions.

To me it seems like hanging, at least, is an obvious gap in the platform. Hanging indentation is a standard feature that's assumed to be available in any moderately-capable text layout system; a typical use-case would be bibliographies, where it is common to use a hanging indent for each paragraph.

Another common use-case occurs in poetry where line breaks are predetermined, but there may be an occasional (logical) line that is too wide for the available space.

It's possible to achieve a hanging indent by setting a negative text-indent with a compensating amount of margin or padding, but this is less author-friendly than being able to directly request hanging indentation, and may complicate the use of margin and/or padding for their "real" purpose of applying to the block as a whole.

Part of this (at least text-indent: hanging) was behind a flag in Chromium for a long time, before eventually being removed, see https://crbug.com/248894. There was no reaction on the bug when that happened.

Interesting - though 248894 was all about text-justify, and (AFAICT from the comments) it looks like the CSS3Text flag was removed primarily because of reports that it broke justification behavior; text-indent: hanging appears to have just been collateral damage.

Are you suggesting this feature has negligible value and should be removed from the spec?

(FWIW, I am currently thinking of implementing both hanging and each-line in Gecko, to match WebKit's behavior.)

[jfkthame]

Do we have signals of web developer demand for this?

FWIW, a search such as how to create hanging indent in CSS turns up lots of tutorials, blog posts, Q&A entries, etc.; I guess that's precisely because this is something people want, and the natural solution of text-indent: <length> hanging is not useful for most authors (because it only works in Safari).

[foolip]

@jfkthame I'm asking if others have signals for priority, since I couldn't find any. We will need to rank this proposal against others in the Interop 2024 planning process, so any information helps.

Thanks for suggesting search terms. There are indeed a lot of articles about this, and a workaround involving padding to cancel out indent. Maybe the simplicity of a workaround makes the pain point smaller.

The top StackOverflow questions I can find are https://stackoverflow.com/q/17158253 and https://stackoverflow.com/q/11809. As a point of comparison, https://stackoverflow.com/q/1495407 is a highly upvoted and viewed question that we used as a signal for aspect-ratio priority.

[nairnandu]

Thank you for proposing CSS text-indent for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop 2024. This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year, if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.