Forum How do I...?

Pulling in "altimg" using attr in CSS?

samL
Is it possible to have PrinceXML display the altimg from MathML?

I was trying to pull it in the CSS in a similar way to poster images, which have worked on videos for me:
content: url(attr(poster, url));

The altimg PNGs I have are also URLs, but I can't get the CSS to pull the image URLs. This is the CSS I am trying to apply:

math {
content: url(attr(altimg, url));
}

and my math looks something like this:
<math altimg="https://altimg_filepath.png" altimg-width="273" altimg-height="19" alttext="tau subscript 21 end subscript plus tau subscript 12 ? end subscript equals r subscript perpendicular F subscript 12 equals r subscript perpendicular left parenthesis F subscript 21 minus F subscript 12 right parenthesis equals 0" >
</math>.

I have not gotten the altimg to display yet, nor have I had any luck trying to change them to poster images in math.

Is the altimg attr supported in PrinceXML? Or am I possibly doing something wrong?
markbrown
Try this:
math {
    content: attr(altimg, url);
}

Edited by markbrown

samL
Thanks mark, I tried that and still no luck, no content is being pulled in.

I can pull the altimg in other elements, such as a figure using this CSS:
figure.video {
  content: url(attr(altimg, url));
}


I typically pull those video figures in using a fallback poster image. I tried adding a working poster image to math, and pulling it in the same way:
math {
  content: url(attr(poster, url));
}


I had no luck with this. I also tried pulling a poster image the same way mark posted above.

I'm wondering if this is a limitation of the <math> element?
markbrown
Yes, you're right. In fact we don't appear to support the content property at all for <math> elements. I'll need to look into this further and get back to you.
samL
Thanks mark, support of <math> would be huge. We have a lot of titles using MathML, that already have these PNG files added as altimg. It would save us a ton of time to be able to leverage those.