[css-inline] vertically align to nth-child

[dauwhe]

In math and likely other contexts, you may have a stack of inline elements, but need to align the surrounding text to the baseline of one particular element in the stack. An example and proposal are at https://codepen.io/pkra/pen/JWbPzZ

How might CSS handle such situations?

[pkra]

Thanks for posting this here, Dave.

For context, this question originated in the Math-on-web CG.

[tabatkins]

Usually, rather than explicitly indicating an element in a property, we invert control and have the target indicate that it's the one to be used (and when necessary, have some sort of tie-breaker for ambiguous situations). So in this case, we'd do something like have a property to indicate that the element has a specially-computed baseline, and another property on the appropriate descendant that it's the one that computes the baseline for its nearest baseline-container.

In your particular example, which element would be contributing the baseline? I think it's the bar, contributing a central baseline?

[pkra]

Thanks so much for your response, @tabatkins. I'm sorry for the long delay. I wanted to get some feedback from other CG members but I had to skip two meetings.

To add some comments from mainly a MathJax point of view.

What you describe would work out well from our point of view, i.e., to have something that marks a container whose baseline will be determined by one of its children, together with a mark on the child that is the one to use for the baseline.

The answer to your question would be yes: in the fraction example, the item to use for the baseline would have to be the fraction line, as suggested.

Another important case is the one for under-over constructions, e.g., a sum with limits on top and bottom (e.g., the Cauchy-Schwartz equation). In that case, we would need to be able to use the middle element for its baseline.

To add some context beyond the simple case (though I realize that I risk causing confusion so please feel free to disregard the rest).

Another case to consider is the situation, where a large, stretchy delimiter (parenthesis, brace etc) is placed around a (large) expression (again, e.g., Cauchy-Schwartz). Here, we would want the baseline to be that of the middle piece not whatever construct is needed for the left and right delimiter (we would also want them to be centered on the math axis which is about .25em above the baseline but that's perhaps another topic). We don't know how to do that without knowing the actual height of the delimiters, defeating the purpose of having automatically stretchy constructions (which is actually doable nowadays). It would be great to be able to make a box containing the left delimiter, the main content, the right delimiter (say a flex-box with the left and right pieces stretching to the height and depth of the container), and have the container use the baseline of the middle piece (ignoring the others).

A different example is a horizontal shift to the top and bottom so that they can be centered, but shifted. This is needed to handle italic correction, like for an integral sign where the limits are placed above and below: they should be centered, but not directly over the integral; the top is shifted to the right, while the bottom is shifted to the left. The bounding box of the entire expression needs to take these shiftings into account properly. I haven't been able to work out a decent way to handle that without knowing the exact widths of the three pieces.

Anyway, this is just to point out that a vertical stack is not the only time that being able to specify whose baseline to use would be a valuable asset.

[tabatkins]

Yeah, all those seem compatible with the "container says it has a special baseline, some descendant marks itself as the baseline-provider". You already have to search arbitrarily far down the tree of descendants to find something that can contribute a baseline.

@fantasai, as an editor of the relevant spec, any thoughts?

[fantasai]

My thoughts are, I agree with @tabatkins :)

[fantasai]

Agenda+ for the joint meeting with Math on Web Pages CG next Monday.

[astearns]

Need to work on the proposal a bit more before bringing this to the agenda.

[fantasai]

So let's say we introduce a property baseline-priority: high | normal for this. The way it would work is that if an element has baseline-priority: high then its baseline gets propagated to its container at a higher priority than any other: it usurps the place of the first/last baseline when we go looking for the first/last baselines. That's maybe not too complicated.

The next interesting question is, what happens when we get to the container's container? It's for sure representing the first/last baselines of its container. Does it try to usurp the first/last baselines of the container's container as well?

Example:

  <ol style="display: inline-block">
     <li>
     <li><ol><li><li style="baseline-priority: high"><li></ol>
    <li>
  </ol>

The first baseline of the inner OL normally comes from the first line of item 2.1, the last baseline from 2.3. But 2.2 says "pick me", so when we go looking for the first or last baselines of the inner OL, we pick the baseline of 2.2. (This would matter if, e.g. the inner OL were a horizontal flexbox that baseline-aligned its items.)

Now suppose the LIs are all (inner and outer) arranged vertically, and we need the baseline of the outer OL to align it to the surrounding text. We're doing first-baseline alignment, so we ask the OL for its first baseline. Does it return the baseline of item 1 or item 2.2 (which we propagate through the inner OL to be the baseline of item 2)?