Re: [csswg-drafts] [css-align][css-tables][css-flex] Synthetized baselines seems like a breaking change

Reopening because this isn't entirely resolved. The current situation 
is as follows:

* Flexbox is underspecified wrt items without baselines (in 
particular, flex items with `display: block` don't have a defined 
baseline).
* Flexbox requires items that have a writing mode orthogonal the 
baseline-alignment axis to be flex-start aligned.
* The baseline of a flex container itself is synthesize from its first
 item’s content box (or its own content box, if it has no items).

https://drafts.csswg.org/css-flexbox/#flex-baselines

* Firefox aligns items without baselines and those with orthogonal 
writing modes at their bottom margin edge.
* Chrome aligns items without baseline at the bottom border edge and 
uses start-alignment for orthogonal writing modes.
* Not sure what Edge does.

http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=4416

There's a few concerns here:
1. Probably, boxes in orthogonal flows and boxes without a natural 
baseline should be treated the same.
2. It's uncertain whether authors want such items to have a “baseline”
 alignment, or whether merely having them fall back to start alignment
 would be sufficient.
3. The inline-layout practice of using the margin edge is useless when
 the margin is positive because it does not align anything visible to 
the baseline. The author could use negative margins to control the 
alignment point, but that risks overlapping content.
4. In grid layout, we have items that can span multiple rows; in this 
case baseline-aligning the bottom edge of the item could be awkward.

Further notes:
* The alignment point of a box without a baseline set can be 
controlled with the `alignment-baseline` property; it will use the 
top/center/bottom as appropriate. Which edge is used 
(margin/padding/border/content) is not controllable, however. A future
 property may allow more precise control of how baselines are 
synthesized, though.
* Inline layout synthesizes a baseline from the margin edge of an 
item. Note it performs baseline self-alignment (shifting the box 
itself).
* Table layout synthesizes a baseline from the content edge of a cell.
 note it performs baseline content-alignment (adding extra padding to 
shift the content within the box).

Proposals:
A. Make boxes without a natural baseline and boxes establishing an 
orthogonal flow synthesize a baseline.
A.1 Base this synthesized baseline on the margin box edges
A.2 Base this synthesized baseline on some other box edge
B. Make boxes without a natural baseline and boxes establishing an 
orthogonal flow use start alignment instead of trying to synthesize a 
baseline.
C. Something else.

Questions to consider:
* Do authors need or want synthesized-baseline alignment? If not, 
falling back to start is simpler.
* Are there considerations wrt implementation complexity?


-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/373#issuecomment-242863486 
using your GitHub account

Received on Friday, 26 August 2016 22:06:59 UTC