[css-text-3] percentage on text-indent

@fantasai

We've discussed this previously, but did not conclude. Old thread starts here:
https://lists.w3.org/Archives/Public/www-style/2015Feb/0250.html

CSS2.1 and CSS-TEXT-3 seem to agree that text-indent applies to block level elements, and that percentages are resolved against the width of containing block, i.e. the parent.

Firefox violates that, and they resolve the percentage against the content area of the element itself.

Even though this seems like a spec violation, it seems to be nicer behavior, as discussed for example in this email: https://lists.w3.org/Archives/Public/www-style/2015Feb/0273.html

given
   #outer { width: 500px; }
   #inner { width: 200px; text-indent: 10%; }

   <div id="outer">
     <div id="inner">
       Lorem ipsum dolor sit amet...
an author will expect the text to have a first-line indent of 20px, not
50px.

We also get the surprising result that, assuming
doesn't have its
own text-indent specified, the two lines in
   <div id="outer">
     <div id="inner">
       Line one.
       <p>Line two.
have different indents. Again, I don't think authors would expect this.

Also, here's another mail where @fantasai argues that refering to the containing block has some odd consequences in tables.
https://lists.w3.org/Archives/Public/www-style/2010Sep/0431.html

Since both behaviors (+ bug based variations) are attested in browsers, we're probably not overly constrained by web compat. Going by the width of the content area of the element makes more sense to me (and to everyone who participated in the previous email threads AFAICT) so I suggest we switch to that.

Most typically, text-indents are specified in lengths, not in percentages, so maybe we shouldn't overthink this, but we should get consistency anyway.

Note: In discussions of this topic, the question of interaction between percentage text-indents and intrinsic sizing is also occasionally raised, but it is present regardless of the solution we pick, so I think these can remain independent, and there's another issue for that: #1597

The Working Group just discussed percentage on text-indent, and agreed to the following resolutions:

RESOLVED: Make text indent percentage relative to the content box of the element

The full IRC log of that discussion

<fantasai> Topic: percentage on text-indent
<fantasai> github: https://drafts.csswg.org/css-text-3/issues-lc-2013#issue-113
<dael> github: https://github.com//issues/2394
<dael> fantasai: Issue is % on text-indent. In CSS 2 if defined as relative to containing block and FF inter as the containing block on element it's set. Chrome it's the containg block of the text being invented. If you interp as on the parent the behavior differs on if you generate anon blocks or not.
<dael> fantasai: Proposal is to make the text indent relative to the context box width of the element itself
<dael> fantasai: Means you don't expose anon block structure.
<dael> florian: I think % text indents are relatively rare.
<dael> fremy: People use -100% to hide text. Only case I've seen.
<dael> astearns: Edge would have to fix?
<dael> fantasai: FF
<fantasai> original post from dbaron at https://lists.w3.org/Archives/Public/www-style/2015Feb/0250.html
<dael> koji: Do we know how often this is used?
<dael> florian: I don't have data. WE know it exists and it's different in different browsers. Prob not too much compat contraint. We're suggesting FF aligns with Chrome which typically doesn't break web.
<fantasai> Jonathan Kew requesting the spec (and Gecko) to change in https://lists.w3.org/Archives/Public/www-style/2015Feb/0273.html
<rego> http://jsbin.com/yodarulizi/1/edit?html,css,output
<dael> koji: Only not compat when anon block exists?
<rego> edge and firefox have the same behavior, which differs from chromium and webkit
<dael> koji: I impl and there was a test case with repeat that all browsers pass.
<dael> florian: If you're not careful in a test case and all boxes are same size it's all the same.
<dael> fantasai: If test case was from iank_ it was probably simple.
<fantasai> s/iank_/hixie/
<dael> koji: It has differences.
<fantasai> s/simple/evil
<dael> koji: I'm willing to simplify just wondering how much data we can discover
<fantasai> (as in, doing a very good job of triggering tricky cases)
<dael> astearns: Any more to discuss?
<dael> fantasai: Jonathan Q was asking for spec to change.
<astearns> s/Q/Kew
<dael> fantasai: Prop: make it relative to content box of the element
<dael> fantasai: Simple behavior, no weird edge cases.
<dael> astearns: Objections to make percentage relative to content box of element for text indent?
<dael> dbaron: Both Edge & Chrome do that?
<dael> fantasai: Don't remember.
<dael> florian: I believe edge does
<dael> fremy: Test case?
<dael> dbaron: I found a web compat bug on percentage text compat on overflow:hidden because when there's 2 boxes we do the same thing as edge and we got a web compat bug. Or had. Probably fixed.
<fantasai> http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5888
<dael> fantasai: Test case ^
<dbaron> https://bugzilla.mozilla.org/show_bug.cgi?id=1306590
<dbaron> and also https://bugzilla.mozilla.org/show_bug.cgi?id=908706
<dael> astearns: rego posted a JSfiddle that for me shows difference from FF and Chrome.
<dael> rego: My example was from the example.
<dael> fremy: On the fiddle we have same as FF
<dael> rego: It's Chrome and Webkit for the other behavior.
<rego> s/from the example/from the issue/
<dael> fremy: Should the two lines be the same per the spec?
<rego> s/JSfiddle/jsbin/
<koji> https://github.com/w3c/web-platform-tests/blob/master/css/css-text/text-indent/text-indent-percentage-001.xht
<dael> koji: This is in web platform tests and passes in all browsers.
<dael> fantasai: So we want it the be the same for both lines. That makes more sense.
<dael> fantasai: Having text indent reference width of parent doesn't make sense.
<dael> koji: [missed]
<dael> fantasai: Depends on what % is about. It's spec against containing block and it's not clear if it's the element itself or the text being created.
<dael> dbaron: I'm fine changing. I don't understand the deal with the compat bugs.
<fantasai> �http://jsbin.com/yodarulizi/1/edit?html,css,output
<dael> rego: This has a paragraph, the other one doesn't.
<dael> fremy: Why should hte text indent be same if the width inside the box is smaller?
<dael> dbaron: There's a p inside so both the lines are in the inner box.
<dael> dbaron: I'm fine changing. If that's what chrome does it'll be fewer total compat issues.
<rego> http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5888 is interopable
<rego> but http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5889 is not
<dael> astearns: Chrome behavior makes more sense to me.
<dael> fantasai: Yes.
<dael> astearns: Prop: Make text indent percentage relative to the content box of the element
<dael> fantasai: It's possible what was trying to be clarified by css2 is that if it's a float it's still the same amount.
<dael> koji: Are you proposing...?
<dael> fantasai: Make everyone match Chrome.
<dael> koji: What we do is different...I believe we have code with containing block and there might be difference in details. This is probably different then what we do.
<dael> fantasai: We're proposing to say FF is wrong. When there's no floats we should do what Chrome does.
<dael> florian: If you can find what's different between what we spec and what you do let us know.
<dael> dbaron: Part of the old problem is people looked at different spec text and thought different things.
<dael> RESOLVED: Make text indent percentage relative to the content box of the element

[css-text-3] %age text-indent refers to the width of the content box

[css-text-3] Tests for percentage text indent

Spec and Test Pull Requests submitted:

Bug 1467346 [wpt PR 11373] - [css-text-3] Tests for percentage text i…

There is an old WPT that checks for the old behavior:

css/css-text/text-indent/text-indent-percentage-001.xht

Florian, are you planning to update it?

I had forgotten about this, thanks for raising it. I'll follow up in web-platform-tests/wpt#13581

Also, the spec update is incomplete.

3f8e4e8 changes the "Percentages" entry of the text-indent property, but a bit further down, it still says:

<percentage>
Gives the amount of the indent as a percentage of the containing block’s logical width.

[css-text-3] Clarify basis of percentage text-indent. #2394

@mstensho

@mstensho Fixed, thanks!

[LayoutNG] Match new spec wrt. percentage text-indent.

Percentage text-indent tests have been fixed and now they pass.

The following also rely on the old definition and need updating, although none of them have reftests:

css/CSS2/text/text-indent-011.xht
css/CSS2/text/text-indent-103.xht
css/CSS2/text/text-indent-104.xht

Bug 1467346 [wpt PR 11373] - [css-text-3] Tests for percentage text i…

Bug 1467346 [wpt PR 11373] - [css-text-3] Tests for percentage text i…

Navigation Menu

Repository navigation

[css-text-3] percentage on text-indent #2394

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-text-3] percentage on text-indent #2394

Description

Activity

css-meeting-bot commented on Apr 11, 2018

frivoal commented on Jun 6, 2018

8 remaining items

szager-chromium commented on Oct 16, 2018

frivoal commented on Oct 18, 2018

mstensho commented on Oct 21, 2018

fantasai commented on Oct 21, 2018

faceless2 commented on Feb 10, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions