CSS box sizing properties with MathML Core

[dginev]

Description

Enable CSS width and height property support in MathML Core elements, possibly also including min-width, min-height, max-width and max-height, to cover all CSS box sizing properties.

The extent of the support should be the uses outlined in MathML Core's layout algorithms.

Specification

https://drafts.csswg.org/css-sizing/#sizing-properties and https://w3c.github.io/mathml-core/#layout-algorithms

Open Issues

No response

Tests

For width and height:

• https://wpt.fyi/results/mathml/relations/css-styling/width-height-001.html
• https://wpt.fyi/results/mathml/relations/css-styling/width-height-002.html
• https://wpt.fyi/results/mathml/relations/css-styling/width-height-003.html
• https://wpt.fyi/results/mathml/relations/css-styling/width-height-004.html

Small extensions may be possible to also include a test exercising each of min-width, min-height, max-width and max-height.

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

No response

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

Rationale

This is a MathML-related interop request with limited scope, as a modest follow-up to last year's #197 proposal.

I received an endorsement by the W3C Math working group to propose this as a math-related enhancement for interop 2024. (during the Math WG's meeting on Oct 5, 2023)

Incrementally increasing the availability of CSS properties in MathML is a great aid for making the <math> family of elements attractive to the broader web development community.

Example use

CSS sizing properties provide a necessary affordance for styling annotations in math syntax. In, turn that also aids in contextually sizing stretchy operators which carry such annotations. For example a horizontal arrow operator can stretch to the specified width CSS property of its <mtext> annotation:

<math>
  <mi>LHS</mi>
  <munder>
    <mo stretchy="true">→</mo>
    <mtext style="height:3em; width:6em; border:solid; text-align:center;">
      Annotation<br>on two lines
    </mtext>
  </munder>
  <mi>RHS</mi>
</math>

CSS sizing is also useful in situations where MathML token elements exceed their usual size (e.g. an <mn> element containing a numeric literal of several hundred digits in length), where it can be reasonably preferred to provide a maximum desired size, as well as text overflow and reflow directives.

[gsnedders]

Tests

Looking at https://wpt.fyi/results/mathml/relations/css-styling?label=master&label=experimental&aligned&q=width%20or%20height, it looks like we also have a bunch of tests about how table cell sizing interacts with MathML layout? I presume these were deliberately excluded above?

[dginev]

I presume these were deliberately excluded above?

Yes, but only in order to keep the issue small and focused.

I believe the table-width-* tests are testing the sizing of <mtable> and MathML layout interplay with <table>, as you suggest.

[gsnedders]

OK, so https://wpt.fyi/results/mathml/relations/css-styling?label=master&label=experimental&aligned&q=width%20or%20height%20%21table would seem to encompass the current proposal.

[nairnandu]

Thank you for proposing CSS box sizing properties with MathML Core for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop 2024. This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year, if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.