Home/ Questions/Q 8857455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T14:35:38+00:00

I have two text labels in a SVG graph: <svg width=960 height=500><g transform=translate(20,20)> <text

  • 0

I have two text labels in a SVG graph:

<svg width="960" height="500"><g transform="translate(20,20)">
    <text class="title" dx="0px" dy="39px">1980-2012</text>
    <text class="cantontitle" dx="0px" dy="78px">Graubünden</text>
</svg>​

I use the following CSS styles:

svg {                                                                                       
    font: 10px sans-serif;                                                                  
}                                                                                           

.title {                                                                                    
    font: 300 78px Helvetica Neue;                                                          
    fill: #666;                                                                             
}                                                                                           

.cantontitle {                                                                              
    font: 300 40px Helvetica Neue;                                                                                                     
    fill: #666;                                                                             
}                                                                                          ​

Unfortunately, the characters aren’t properly left-aligned.

Screenshot

Is it possible to properly left-align the first characters of two <text> elements?

Here’s a jsfiddle for easier testing: http://jsfiddle.net/UMnnP/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The text is left aligned. The offset is caused by the metrics of the glyphs in the font. In difference to a simple path a glyph has additional metrics definitions, which define the rectangle it »lives« in. The left end of this rectangle is independent from the left end of the glyph’s graphics, it can have an negative and positive offset. Additionally to the font-metric, kerning is added to special pairs of glyphs.

    To align the glyphs totally accurate to the left you need to convert the text into paths, or you can try to get the offset by checking the metrics of the glyph, what is easily possible if you have the font in svg format. But all in all, this can become very tedious and a little handwritten offset to correct that can save you from hours of coding, but if you really need it I strongly recommend to get in touch with fonts and their metrics.

    Greetings…

    EDIT:

    your css does not work! I just saw it too late…

    it must be:

    font-family : Helvetica Neue

    instead of 

    font : Helvetica Neue

    With this it is quite more left aligned…

    • 0