CODEWITHSUNDEEP
csssvg
Danilo Bargen
Danilo Bargen

Reputation: 19432

Left-align letters in SVG

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/

Upvotes: 2

Views: 175

Answers (1)

philipp
philipp

Reputation: 16495

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…

Upvotes: 1

Related Questions