Re: CSS example in action

I was still working on the section. It now contains a link to Brian's
codepen along with the inclusion of the other two examples.

Brian's code won't work on the later two examples because they are nested.
The code needs to be restructured so it can be called recursively. I don't
think it is hard  to do, but I need to work on the gap analysis and can't
do it now.  If someone one wants to give it a try, here's a codepen with
all the examples and CSS <https://codepen.io/nms/pen/xxLxLVV?editors=1111>and
a little bit of text explaining what is happening -- probably a better
starting point. A small wrinkle is CSS might be needed to speak the prime.

I'm looking for a volunteer to add the two examples to the parallel markup
section in the gap analsys (hidden in a <details> element as is done for
the CSS section). Any takers?

    Neil




On Fri, Oct 8, 2021 at 11:44 PM Paul Libbrecht <paul@hoplahup.net> wrote:

> This is a super example @Brian!
>
> I have a difficulty with the last paragraph:
>
>    - Houdini’s: refs?
>    - exposing the CSS parser seems to me less relevant than exposing the
>    CSS selection mechanism which is ultimately needed
>    - why not point to the codepen example?
>
> paul
>
> On 9 Oct 2021, at 8:18, Neil Soiffer wrote:
>
> I suspect most people don't see the commit logs, so I thought I'd share a
> link Brian had in his commit to a codepen that shows a working example of
> his CSS example <https://codepen.io/bkardell/pen/xxLKOxo?editors=1111> in
> the gap analysis <https://w3c.github.io/mathml-docs/gap-analysis/#css>.
>
> Basically, the JS takes the "CSS" and adds aria-label so that
> <mathml>
>   <mrow data-intent="point"">
>     <mo>(</mo>
>     <mi class="arg1">0</mi>
>     <mo>,</mo>
>     <mi class="arg2">5</mi>
>     <mo>)</mo>
>   </mrow>
> </mathml>
>
> becomes
> <mathml>
>   <mrow data-intent="point" aria-label="the point 0 comma 5">
>     <mo>(</mo>
>     <mi class="arg1">0</mi>
>     <mo>,</mo>
>     <mi class="arg2">5</mi>
>     <mo>)</mo>
>   </mrow>
> </mathml>
>
>
>