JasperReports Library Custom Visualization ignores dominant-baseline and alignment-baseline attributes

[dhombios]

When using dominant-baseline and alignment-baseline attributes in a Custom Visualization to set a text element position in the svg viewport as hanging in a report generated from a custom Java application using JasperReports Library version 6.16, the resulting pdf is rendered ignoring them independently on whether PhantomJs or Chromium is used, resulting in the text being located outside of the viewport. Nevertheless, if the report is exported as html, the report is rendered correctly in the same version of chromium that I am bundling with the executable.

Additionally, this problem also happens when the same report is exported in html and opened inside Jaspersoft Studio Community, yet if the html file is opened in chrome it is also rendered correctly.

According to some answers in stackoverflow, this error can be caused due to inhereting the svg a display inline attribute from the html in which it is embedded. However, setting the svg display attribute to block does not solve it.

A workaround for solving this is to set the dy property of the text to 0.75em, but the resulting top margin might change if several texts with different font sizes are used.

This problem was initially mentioned in https://github.com/TIBCOSoftware/jasperreports/issues/189#issuecomment-845379270

Thanks in advance

Generated SVG passed to Chromium or PhantomJS:

<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\ "http://www.w3.org/2000/svg\" id=\ "element66576560284652498011372360525284671058svg\" width=\ "389\" height=\ "240\" style=\ "fill: transparent;\" version=\ "1.1\"><defs><style type=\"text/css\">\nsvg circle { fill: rgb(240, 0, 255); }\n.number-text { fill: white; font-family: arial; }</style></defs><text dominant-baseline=\"hanging\" aligment-baseline=\"hanging\" x=\"389\" y=\"0\" text-anchor=\"end\" class=\"number-text\" style=\"font-size: 60px;\">.95</text><text dominant-baseline=\"hanging\" aligment-baseline=\"hanging\" x=\"305.578125\" y=\"0\" text-anchor=\"end\" class=\"number-text\" style=\"font-size: 240px;\">8</text><text dominant-baseline=\"hanging\" aligment-baseline=\"hanging\" x=\"172.09375\" y=\"0\" text-anchor=\"end\" class=\"number-text\" style=\"font-size: 120px;\">\ufffd</text></svg>

Example of the D3js code that generates one of those text elements:

var cents_text = svg.append("text")
        .attr('dominant-baseline', "hanging") // set text baseline
        .attr('alignment-baseline', "hanging") // set viewport baseline
        .attr("text-anchor", "end") // left alignment
            .attr("x", w)           // set x position of left side of the text
            .attr("y", 0) // set y position of upper side of the text
        .attr("class", "number-text") // set css class
        .text(cents)          // define the text to display
        .style('font-size', "60px");

And its CSS style:

.number-text {
    fill: white;
    font-family: arial;
}

[dadza]

Looks like a Batik limitation. The SVG implementation status page lists alignment-baseline and dominant-baseline as not implemented.

[dhombios]

Thanks, I'll open a feature request in their issue tracker