My best attempt so far at raw SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400mm" height="500mm" viewBox="0 0 400 500" version="1.1">
    <rect x="0" y="0" width="100%" height="100%" fill="white" stroke="red"/>
    <text text-anchor="middle" font-size="150">
        <tspan style="font-family:'DejaVu Sans Mono';" x="50%" y="0" dominant-baseline="hanging">eval</tspan>
        <tspan style="font-family:'DejaVu Sans'">
            <tspan x="50%" y="50%" dominant-baseline="middle">is</tspan>
            <tspan x="50%" y="100%">evil</tspan>
        </tspan>
    </text>
</svg>

Inkscape seems to ignore dominant-baseline completely, so I'll ignore how that looks there, but even in Firefox it looks terrible:

screenshot

  • The first line is too low - if I were to add an “M” to that line it would not touch the top of the image.
  • The first line is not centered horizontally.
  • The second line is above and to the left of the middle.
  • The bottom of the last line is cut off - I was trying to align it to the bottom of the glyph, which includes “descenders” or whatever the bottom of the “j” is called. In the screenshot it looks like it might be just one or two pixels, and could be explained by the red rectangle, but in full resolution it's clearly missing 10+ pixels.

How can I fix these? By that I mean how can I achieve “natural” alignment of each word in relation to the image - touching the top and bottom, centered on the middle of the glyph for the middle line, and all three horizontally centered.

  • #4 (you might want to enumerate your bullets instead): that is clearly cut off at the exact baseline of the text. Rounded shapes are supposed to stick out a bit, else they appear too small (aka. "it's just an illusion"). In other words: not really an error, just a literal implementation. To get more white at the bottom, add something there. – usr2564301 Dec 6 at 11:15
  • 1
    Maybe this answer helps – Danielillo Dec 6 at 13:57

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.