- From: Dael Jackson <daelcss@gmail.com>
- Date: Mon, 13 Feb 2017 20:20:10 -0500
- To: www-style@w3.org
=========================================
These are the official CSSWG minutes.
Unless you're correcting the minutes,
Please respond by starting a new thread
with an appropriate subject line.
=========================================
Text Track
++++++++++
Inline Layout & Initial Letter
------------------------------
- RESOLVED: The 'float' property has no effect on initial letter
boxes. Note that it still affects 'display'
computation, so applying it to inlines will still turn
them into floats.
- RESOLVED: Initial letter boxes are in-flow.
- An issue will be filed to define how line boxes and
initial-letter interact https://github.com/w3c/csswg-drafts/issues/887
- It seemed like people were leaning towards a decision that
initial letter can add extra space above the top of the first
line box, but the group had to break before a conclusion could
be reached.
===== FULL MINUTES BELOW ======
Agenda: https://wiki.csswg.org/planning/seattle-2017
Note: The group split the morning of the 11 January on two
tracks: FX and Text.
Scribe: fantasai
Text Track
++++++++++
Inline Layout & Initial Letter
==============================
Slides: https://lists.w3.org/Archives/Public/www-archive/2017Feb/att-0000/Initial-Letter-examples-SeattleF2F.pdf
Floats & initial-letter
-----------------------
<fantasai> https://drafts.csswg.org/css-text-decor-4/
<astearns> https://github.com/w3c/csswg-drafts/issues/689
dauwhe: Lots of issues popping up in GitHub
dauwhe: falling into 2 categories.
dauwhe: One is interaction of initial-letter and floats.
dauwhe: Other category might describe as more fundamental about
how box model works for initial letters.
[dauwhe shows off example]
dauwhe: This is dbaron's example
<dbaron> https://github.com/w3c/csswg-drafts/issues/689#issuecomment-270385732
* fantasai agrees with dbaron's proposal in the issue
dauwhe: webkit treats initial letter as a float, e.g. applying
'clear' has an effect just like for floats.
dauwhe: As a book person, this is breaking fundamental rule that
the letter isn't moved away from subsequent text.
dbaron: I think the spec actually says this is wrong already.
dbaron: Spec currently doesn't handle this case correctly.
dbaron: I think the spec says the T overlaps the red float, but
not 100% clear.
[dauwhe shows more examples]
dauwhe: If there is a float before the first line of the
paragraph, what happens?
dauwhe: Float separating letter from subsequent text is obviously
wrong.
dauwhe: Pushing down the float below the first letter is awkward.
dauwhe: Best result is if the float is in the top left corner of
the paragraph, before the initial letter.
dbaron: This is a float whose anchor is somewhere in the first
line.
dauwhe: Float anchored on second line, here are some possible
behaviors.
dbaron: Spec currently calls for third behavior (float after the
initial letter).
dbaron: Other option is the second one (float aligned to top of
second line, but placed before the initial letter, pushing
it out).
dauwhe: Can we say that float anchored on first line is before the
initial letter?
dauwhe: and if anchored subsequent lines pushes down?
SteveZ: If float is placed before first line is begun, should push
aside the initial letter.
dbaron: Suppose float is between "winter" and "of"
SteveZ: Then you get the first result (initial letter in top left
corner).
dbaron: Seems like we all agree on the results we want.
dbaron: Want to throw in one other comparison.
dbaron: Want to consider float on second line case.
dbaron: Also consider bunch of floats that are before the
paragraph, some of which are placed lower on the page.
dbaron: As in the example I posted.
<float>
<float>
<paragraph>
dbaron: In these cases it doesn't make sense to push the float
down, because we've already placed the float.
* fantasai agrees with dbaron
astearns: There's rules about float not being able to go above the
line.
SteveZ: Going back to the first example, why doesn't the paragraph
follow the T in moving down?
dbaron: I think in this case, the T should be here (aligned the
top to the top of the first line of text, so partway above
the top edge of the red box)
dbaron: This matches what we do for a single line (no initial
letter) with the height of the initial letter.
dbaron: Even though some impls would start flush with the green
box and have the text overlap the subsequent float...
Florian: If the floats of the same width or decreasing width, if
increasing width doesn't look great.
SteveZ: So don't do that.
dbaron: It's not that bad.
dbaron: In a real-world example, like stuff on Wikipedia, 'cuz
wikipedia is the main site on the Web that uses floats as
they were intended.
dbaron: If you have two floats here *draws two boxes, lower one is
wider*
dbaron: If you have some text here *draws 4 squiggly lines
representing para next to first float*
dbaron: *draws drop-cap T and subsequent squiggles starting a
little above the top of the bottom box and flush with its
far-right edge*
dbaron: This doesn't look weird
[everyone agrees]
[looking back at second-line cases]
dbaron: Spec currently calls for #3 (float is below initial letter)
dauwhe: Agree, #3 is the best imho
Florian: If you have multiple floats all anchored on the first
line.
...
fremy: In #3 if you have a right float, it also gets pushed down?
dbaron: Only floats on the same side as the initial letter.
dbaron: If there was a right float *after* the left float, then it
would go down, too.
fremy: OK
Florian: What happens with 'initial-letter' and 'text-align:
right'?
[dauwhe shows off bad WebKit behavior]
myles: Do you have any more bugs in WebKit?
<dbaron> I just filed https://github.com/w3c/csswg-drafts/issues/884
on text-align interaction
<astearns> issue https://github.com/w3c/csswg-drafts/issues/360 -
we know the intent behind the solution
astearns: So we have intent behind solution for 360
<astearns> we also have the intent for
https://github.com/w3c/csswg-drafts/issues/689
astearns: For 689 also have intent
astearns: Next is 688
<astearns> https://github.com/w3c/csswg-drafts/issues/688
Floating an initial letter
--------------------------
dauwhe: What if you declare 'float' and 'initial-letter' on the
same thing?
dbaron: Would like define that 'float' is ignored.
dbaron: Part of the advantage of this is that it provides good
fallback.
dbaron: Right now you can do float and non-float methods.
dbaron: People might want to fall back to either one of those,
depending.
rachelandrew: People might want to do it as shapes.
rachelandrew: In Shapes Level 1, can only do shapes on floats
dbaron: If we want to support that, then we should say that you
can use shapes on initial letter.
fantasai: We have initial-letter-wrap property which basically
does that.
astearns: That only works for glyph shape. If you want a basic
shape, would want shape-outside to apply to the initial
letter.
* rachelandrew files https://github.com/w3c/csswg-drafts/issues/885
astearns: So interaction between float and initial letter.
astearns: Is only for first letter?
fantasai: initial-letter currently defined so that it applies to
::first-letter and to inlines at the start of a block.
fantasai: so it's not specific to ::first-letter.
dbaron: I'd still be okay with it overriding float, even on
inlines.
Florian: I buy fallback story, with one concern.
Florian: If height applies to initial-letter, then you need to
pull out @supports.
fantasai: We need to say that one of them gets ignored, might as
well be 'float'
SteveZ: No, you make the initial letter element a float and
initial-letter applies to that.
...
astearns: So proposal is ...
fantasai: Just say that 'float' doesn't apply to initial letter
box.
dbaron: I would actually change the computed value.
dbaron: I get annoyed by computed value changes when dependency
graph becomes messy.
dbaron: But there aren't any properties that mess with computed
value of initial-letter, so less worried about this one.
astearns: Objections?
Proposed resolution: The 'float' property has no effect on initial
letter boxes.
fantasai: But what about 'display: block' elements? On those
'initial-letter' doesn't apply, so 'float' should take
effect.
dbaron: Yea, I guess, and then you have to figure out whether on
inlines it's the first inline...
dbaron: On an inline, 'float' will change 'display: inline' to
'display: block'
dbaron: so have a problem there.
dbaron: Stick with proposed resolution, and then fallback will
work for ::first-letter, but not for inlines
dbaron: since 'initial-letter' applies to ::first-letter and to
inlines at the start of a block, and 'float' makes an
inline no longer an inline
[Now discussing use cases for applying initial-letter with a span]
Florian: Needed for handling cases where automatic :first-letter
detection doesn't do the right thing.
tantek: Also if you want the first letter to be an image.
astearns: I'm OK with what dbaron said, allow fallback on
::first-letter but not on inline spans.
fremy: But wouldn't the 'display: block' thing take effect anyone?
dbaron: But the spec calls out ::first-letter specifically, not
dependent on its 'display'.
dbaron: In the case of applying 'float' to inline, it'll just be a
float.
...
SteveZ: So you're saying that because 'float' turned it into a
block, then 'initial-letter' cannot apply
fantasai: Right.
RESOLVED: The 'float' property has no effect on initial letter
boxes. Note that it still affects 'display' computation.
Are initial letters in-flow?
----------------------------
<astearns> https://github.com/w3c/csswg-drafts/issues/743
Florian: What depends on this?
fantasai: There's some spec prose in various places that uses
in-flow and out-of-flow.
fantasai: I think we should define it to be in-flow.
fremy: Table box generation rules e.g. are affected.
dbaron: I would also prefer to define it as in-flow.
dbaron: I would like to change as little as possible, but be clear
for those things that care.
dbaron: Agree with fantasai that it ought to be in-flow.
astearns: I'm happy with that, but one concern...
astearns: Working on other features... we have this paragraph
*highlights drop-cap squiggle drawing from before*
astearns: It has a baseline here. Want to refer to it as the first
line box's baseline.
dbaron: We can detach whether it's in the first line box from
whether it's in flow.
fantasai: It doesn't have a line box.
dbaron: Agree that it's not part of the first line box, but
disagree that it doesn't have a line box
astearns: and disagree it doesn't have a baseline
[dauwhe pulls up examples of flow around a drop-cap with a
one-line paragraph]
dauwhe: These are partly floaty, but not entirely.
astearns: Baselines?
fantasai: In alignment spec we're defining first and last
baselines, and initial letter not part of that.
astearns: [missed]
fantasai: It's floaty, but we should not classify it as
"out-of-flow".
dauwhe: There is a box here that behaves differently from other
boxes in CSS.
dauwhe: We should say that it is in-flow for text-selection etc.
But also things flow around it.
SteveZ: It has some properties of float.
dbaron: Part of my rationale is the various places in the spec
that say, e.g. "if it has in-flow content", this should
count.
Florian: I don't have a good mental model of places where the spec
uses these terms.
Florian: But ppl who do...
fantasai: I have a good enough mental model to say we definitely
are better off to say it's "in-flow".
dbaron: Most of these places are checks for in-flow content, and
this definitely should count.
fremy: unsure...
dbaron: We can define how it works in the spec, but in terms of
how other things consider it as content.
dbaron: It should be in-flow.
[discussion]
fantasai: It's only like an out-of-flow in that, like floats,
it has wrapping behavior.
...
fantasai: An out-of-flow element has a placeholder and is laid out
somewhere else. That is not the case here.
fantasai: Because these categories are used elsewhere, we need to
specify clearly which one it falls into so that it is
hooked up to the rest of CSS.
fantasai: And I think the appropriate categorization here is
in-flow.
Florian: And if there are places which are not using the
classifications correctly, we should fix those there.
fantasai: Yes.
[dbaron quotes from CSS2.1 to illustrate uses of in-flow vs
out-of-flow]
<dbaron> I quoted: "Line boxes that contain no text, no preserved
white space, no inline elements with non-zero margins,
padding, or borders, and no other in-flow content (such
as images, inline blocks or inline tables), and do not
end with a preserved newline must be treated as
zero-height line boxes for the purposes of determining
the positions of any elements inside of them, and must be
treated as not existing for any other purpose."
astearns: fremy, are you ok with resolving as in-flow and working
out details if necessary later?
dbaron: For the record, I think this is what falls out of CSS2.1
definitions.
skk: In the drop-cap with one-line paragraph, if underline is
applied to this red line, what happens?
skk: Does first letter also have an underline?
dbaron: I believe the underline applies to the initial letter at
the correct position
SteveZ: You need to call that out explicitly
dbaron: I think this falls out from the discussion of which line
box the initial letter belongs in.
astearns: So resolve on being in-flow, and raise an issue on the
line box.
RESOLVED: Initial letter boxes are in-flow.
<dbaron> Filed https://github.com/w3c/csswg-drafts/issues/887 on
interaction with line boxes
fantasai: Is there a reason the root element is out-of-flow?
fantasai: Because it behaves exactly like an in-flow box, but it's
described as out-of-flow.
astearns: defer that discussion to tomorrow...
How initial-letter makes the block taller
-----------------------------------------
<astearns> https://github.com/w3c/csswg-drafts/issues/719
dauwhe: Issue on initial-letter clarifying how it makes the block
taller.
dauwhe: We have the alignment points
dauwhe: but we don't just glue the content box to the top of the
containing block.
dauwhe: Seems like we lay out first line, then place initial
letter relative to first line.
dauwhe: No idea how to proceed here in spec terms...
dauwhe: I just know what I want things to look like.
dbaron: I think some of the issues where this makes a difference
are what happens if you have other stuff on the first line
dbaron: e.g. what if you have a 'vertical-align: top' image on the
first line.
dbaron: I'm curious what are cases where you know what you want.
dbaron: Issue that I filed, not at all convinced that there were
cases that mattered. Just wanted spec to say something so
we all agree.
astearns: If you put a bunch of margin on your initial letter, it
should push the paragraph down.
dbaron: Assuming initial letter is positioned such that it would
do that.
Florian: What's the use case for margins on the initial letter?
SteveZ: You might want negative margins to pull content into the
glyph bounding box.
dbaron: A case for bottom margins, if you want your letter to line
up with the top five lines but you actually want it to
exclude space from the 6th line.
astearns: Diacritics is a good case for margins on the initial
letter.
astearns: You don't want margin on paragraphs in general, but want
enough to ensure no collision of diacritics.
dauwhe: We already exclude glyph area.
dauwhe: Also think there should be a high bar for saying you can't
use margin in CSS.
jensimmons: If you have border/padding, wanting margin is natural.
[discussion of using margins and padding for spacing]
jensimmons: You want to set your paragraph margins and padding for
no initial letter, and make further adjustment on
initial letter itself for when it is present.
...
dbaron: Main thing it affects is what vertical-align top and
vertical-align bottom do.
dbaron: These feel like they're not really for formatting text.
dbaron: They're for layout tricks and you happen to have an inline
and you want it to do something special.
SteveZ: When you were talking about line box, could say that
initial-letter box affects the top of the line box but not
the bottom.
SteveZ: So the top of the line box gets moved up so it includes
the initial letter, but the bottom doesn't.
SteveZ: But worry about some alignment issues...
dbaron: That is one of the two entirely reasonable options.
dbaron: The other is saying the line box is entirely unaffected.
SteveZ: Yes, but if you want to align something to the top
including initial letter, you need to affect the line box.
fantasai: You do have the option of using 'vertical-align:
text-top', if we increase the height of the line box.
astearns: I'm leaning towards not increasing height of the line.
astearns: So it's a question of whether we can find a use case.
SteveZ: If you don't do that you need to rewrite the block text so
that it explicitly calls out the initial letter box to
affect the hight of the box.
fantasai: It does seem simpler to say that it affects the height
of the line box.
astearns: My whole paragraph is top-aligned.
fantasai: What do you mean?
dbaron: You can't vertical-align a block.
astearns: All content in the first line is 'vertical-align: top'
astearns: We're positioning the cap height of this content.
fantasai: You're positioning the initial letter to the root inline
box, which isn't vertical aligned.
astearns: OK
Florian: Affecting height of the line box would interact badly
with line-height-step sizing.
Florian: You're step sizing your lines.
Florian: You add in initial letter with margins and padding and
stuff
Florian: And suddenly your first line is double height.
Florian: It's not what you want.
fantasai: Or is it?
SteveZ: That would be intended, right? You're trying to maintain
rhythm.
SteveZ: Using margins on initial letters needs careful thought.
dbaron: My gut feeling is that line-stepping or various proposals
would be more likely to benefit from not increasing height
of the line box.
dbaron: But hard to tell without working through it.
Florian: If the first line that might or might not be affected is
at the beginning of the content, then better to avoid
step sizing it.
Florian: But if it's the third paragraph, then you might want to
apply it there, to maintain the rhythm.
...
dauwhe: For raised caps the block gets taller, there isn't a flow
around.
<dbaron> I think a bunch of people are leaning towards the idea
that the initial letter can add extra space above the top
of the first line box.
astearns: We need to define this box and figure out interactions,
but we're not going to do that now. Gonna do lunch.
SteveZ: Independently of whether initial letter affects the line
box side, it affects the container size.
dbaron: Yes, that's already clear in the spec.
dbaron: Issue is whether it does that by increasing the size of
the first line box or by adding space above the first line
box.
<br type=lunch><div id="DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2"><br />
<table style="border-top: 1px solid #D3D4DE;">
<tr>
<td style="width: 55px; padding-top: 13px;"><a
href="https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=icon"
target="_blank"><img
src="https://ipmcdn.avast.com/images/icons/icon-envelope-tick-round-orange-animated-no-repeat-v1.gif"
width="46" height="29" style="width: 46px; height: 29px;" /></a></td>
<td style="width: 470px; padding-top: 12px; color: #41424e;
font-size: 13px; font-family: Arial, Helvetica, sans-serif;
line-height: 18px;">Virus-free. <a
href="https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=link"
target="_blank" style="color: #4453ea;">www.avast.com</a>
</td>
</tr>
</table><a href="#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2" width="1"
height="1"></a></div>
Received on Tuesday, 14 February 2017 01:21:15 UTC