w3c / w3c/mathml-core

Supporting `calc(100% + 0.333em)` in the `width` attribute of `<mpadded>`

Open
#306 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
56
Forks
20
PR merge metrics
No merged PRs in 30d

Description

<mpadded> is only really useful for horizontal spacing when it's possible to add something to the width. For example, if one sets lspace on <mpadded> but does not change the width, then the lspace eats into the width of the content.

MathML 3 had the width="+0.333em" notation for this (with + as the prefix) but this was apparently replaced by a new notation in MathML 4, see this example:

<mrow>
  <mi>x</mi>
  <mpadded lspace="0.3em" width="calc(100% +0.6em)">
    <mi>y</mi>
  </mpadded>
  <mi>z</mi>
</mrow>

The problem for MathML Core here is that the 100% here refers to the width of the child, and not to the width of the parent, as is the case in CSS.

But there is actually a solution in CSS, with the newly proposed calc-size function. The following actually works correctly in Chrome (which is the only browser currently implementing calc-size):

<math display="block">
  <mi>x</mi>
  <mpadded lspace="0.16667em" style="width: calc-size(min-content, size + 0.33333em)">
    <mi>sin</mi>
  </mpadded>
  <mi>θ</mi>
</math>

So, I think the spec should be either changed so that:

  1. width on <mpadded> accepts any CSS value (currently only allows length-percentage), so that the new calc-size() can be used there
  2. support for calc(100% + 0.333em) is explicitly hard-coded in the spec and is internally translated to calc-size()
  3. (as David says below) width accepts calc-size() in addition to length-percentage

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the MathML Core definition of the width attribute and the linked MathML 4 example, then compare the proposed calc-size() behavior in CSS. Done means the specification resolves one of the three proposed approaches and clearly defines the accepted syntax and child-relative sizing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.