[CSS: text-indent] Implement 'each-line' and 'hanging'
Categories
(Core :: Layout: Text and Fonts, enhancement)
Tracking
()
People
(Reporter: George, Assigned: jfkthame)
References
(Blocks 2 open bugs, )
Details
(Keywords: css3, dev-doc-complete)
Attachments
(2 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:14.0) Gecko/20100101 Firefox/14.0.1 Build ID: 20120713134347 Steps to reproduce: Authors commonly want to add a text-indent on each paragraph of their writing. (This is natural to anyone who composes documents in a page-based text editor) To achieve this stylistic result, authors currently have to insert HTML code to delineate their paragraphs. An author will, for example, write: HTML <article id=container> <p>First paragraph ...</p> <p>Second paragraph ...</p> <p>Third paragraph ...</p> </article> CSS p {text-indent: 2em;} This unnecessarily pollutes the DOM with excess elements. Authors rarely plan to style each paragraph individually (beyond the current limitation of text-indent). But, with text-indent: each-line implemented, an author could write the much simpler: <article id=container> First paragraph <br> Second paragraph <br> Third paragraph <br> </article> article {text-indent: 2em each-line} Of course, if there is a practical reason to denote each paragraphs' start /end (JavaScript manipulation, linking through ids etc), the old way of adding markup would still be valid. But this is usually the exception, not the rule. Interested readers can view the specification here: http://www.w3.org/TR/css3-text/#text-indent0 Thank you for your time.
Updated•12 years ago
|
Comment 1•11 years ago
|
||
There's also `text-indent: (value) hanging` and the combination of both. This bug should probably cover both as they are supplementary.
Comment 2•10 years ago
|
||
According to comment 3 the title of this issue should probably be changed to include 'hanging'. Sebastian
Updated•10 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Comment 4•7 months ago
|
||
It seems the data on MDN and caniuse.com is outdated, as Safari apparently supports these as of version 16 (or perhaps 17, where the values do seem to be working for me in live testing). Chrome also has them behind an experimental flag, so it might be worth revisiting the priority here.
Assignee | ||
Comment 5•7 months ago
|
||
According to https://github.com/mdn/browser-compat-data/issues/20363, they've been supported since Safari 15.
Assignee | ||
Comment 6•7 months ago
|
||
Updated•7 months ago
|
Assignee | ||
Comment 7•7 months ago
|
||
Depends on D191522
Updated•7 months ago
|
Pushed by jkew@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/5d24c715fa6f Implement the 'hanging' and 'each-line' options for CSS text-indent. r=emilio https://hg.mozilla.org/integration/autoland/rev/fd55b93190fe Update WPT metadata for tests that now pass. r=dholbert
Comment 9•7 months ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/5d24c715fa6f
https://hg.mozilla.org/mozilla-central/rev/fd55b93190fe
Comment 10•7 months ago
|
||
Did you want to nominate this for the Fx121 release notes?
Assignee | ||
Comment 11•7 months ago
|
||
Release Note Request (optional, but appreciated)
[Why is this notable]: Simplifies the creation of hanging-indent layouts, which is a common author request.
[Affects Firefox for Android]: yes
[Suggested wording]: The CSS text-indent property now supports the 'hanging' and 'each-line' keywords, offering more convenient paragraph layout for styles such as bibliographies, poetry, etc.
[Links (documentation, blog post, etc)]: https://drafts.csswg.org/css-text/#text-indent-property
Comment 13•6 months ago
|
||
Description
•