Forum How do I...?

Math Gliphs not sized/positioned correctly

We are seeing some issues with Prince 8.0 and how some math symbols are being rendered. Specifically we have concerns about the overline, triangle, and angle symbols:

The first 3 lines and last line were rendered by Prince. The overline is too far above its corresponding content, causing line spacing to be affected and readability issues. The overlines on the third line appear as an underline to the line above in addition to increasing the line spacing.

The next three lines are what we expect to see. The overline is just above its content and the line spacing is not changed.

As can also be seen in line 3, the triangle is too small and centered in the line (when using Arial Unicode MS). Line 7 at the bottom, also rendered by Prince, shows that using the DejaVu font fixes the alignment (it is baselined with the text) and increases the size a bit, but it is still too small.

The angle symbol has too much white space to the left and right. The image below shows how prince (line 1) renders the angle symbol with excessive whitespace around it. the second line is what is expected, with the angle symbol treated as any other character.

The script to generate these results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "">
<html xmlns="">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			math { vertical-align: baseline; } 
		<strong>First Line<br />
		second line with normal line spacing below the first<br />
		The lines in <math xmlns=""><mrow><mi>▵</mi><mrow><mi>A</mi><mi>B</mi><mi>C</mi></mrow></mrow></math> are <math xmlns=""><mrow><mover><mrow><mi>A</mi><mi>B</mi></mrow><mo>¯</mo></mover><mo>,</mo><mover accent="true"><mrow><mi>B</mi><mi>C</mi></mrow><mo stretchy="true">¯</mo></mover></mrow></math>, and <math xmlns=""><mrow><mover accent="true"><mrow><mi>A</mi><mi>C</mi></mrow><mo class="overline" stretchy="true">¯</mo></mover></mrow></math> .<br />

		<math xmlns=""><mo>∠</mo><mrow><mi>B</mi><mi>C</mi><mi>E</mi></mrow><mo>≅</mo><mo>∠</mo><mrow><mi>D</mi><mi>C</mi><mi>E</mi></mrow></math>

I have read in other posts that CSS will not affect MathML tags. Is there a way to change how Prince renders these symbols so they appear more as we expect them to?

Also, it appears that Arial Unicode MS is not a sufficient font on Windows for some math symbols. I had to install DejaVu before a glyph could be found for the longLeftRightArrow (U+27F7).
  1. angle-Prince.gif1.6 kB
    extra whitespace around angle symbol
The spacing around the angle symbol can be removed by adding this definition to the math/operators.xml file found in the Prince installation:
<operator mo="&angle;"
    lspace="0em" rspace="0em"/>

The appearance of the triangle character is wholly dependent on the font, as Prince simply uses whatever glyph is found in the currently selected font.

Fixing the height of the overlines might require some changes to MathML rendering in Prince. A possible workaround in the meantime could be to use CSS text decoration for overlines, which appears to produce pretty good results:
<span style="text-decoration: overline">AB</span>
We have found another MathML rendering issue with the composite function operator:

the image shows how it should look on top and how prince renders it on bottom:

Specifically, the composite operator is being rendered as a degree symbol.

The code to generate this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "">
<html xmlns="">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<math xmlns=""><mrow><mi>f</mi><mo>&compfn;</mo><mi>g</mi></mrow></math>

Our current workaround is to use the &cir entity instead of &compfn, but this produces a larger circle. Is there any way to fix this so that the &compfn; MathML entity is displayed correctly?
  1. composit-function.gif1.0 kB
    misplacement of composite function symbol
This is a font issue. The DejaVu Serif font has a nice glyph for this character, but many other fonts unhelpfully make it too large or awkwardly aligned. Do you know which font you are using for this document?
Acrobat is showing that the MingLiU font was used. We installed the DejaVu font earlier to provide glyphs for double arrows and such for which no other font provided a glyph, but had placed it just under 'Arial Unicode MS' in the font.css file, making it 2nd to last for selection. Placing it under the MingLiU Font makes it 3rd of 13 Serif fonts and provides the correct rendering of the &compfn; entity
The solution for <mover> is use a text-decoration but however I cant use text-decoration inside a math declaration, can I ?

I am trying something like this:

 <mo>&#x00AF;</mo> // &OverBar;

but is rendering very far, but now i tried this:

<mi style="text-decoration: overline;">x</mi>

Is this possible ? Or text-decoration isnt a valid attribute in <mi> element ?
Currently this isn't possible, as most CSS properties are not supported on MathML elements. You can actually emulate most of MathML using pure CSS, which may be an option for you if your equations are not too complex.