: How can I keep the font-width consistent in SVG across different operating systems and browsers? I'm trying to add some text to a SVG file. The text is dynamic and shown over a rectangle which

I'm trying to add some text to a SVG file. The text is dynamic and shown over a rectangle which acts as background.

Since the text is dynamic, the width of background rectangle also needs to be dynamic. So, to be consistent, I'm using a fixed-width monospace font (Droid Sans Mono) and calculating the width of the background rectangle by using the expression - (x*6.4)+4), where x is the number of characters in the text, and 4 is added for padding (2 left, 2 right). Also, assuming that 6.4 is the avergae width of each character in the Droid Sans Mono font (just a guess).

So, for text Ruby on Rails, number of characters are 13, so the width of the background rectangle is 13*6.4+4 = 87.2.

Which works perfectly in browsers (Firefox and Chromium) on Ubuntu. However, when seen in the same browsers (Firefox and Chrome) on Windows, the text overflows the rectangle.

So my question is that, how can I ensure that the image has consistent look across different operating-systems? The image does has consistent look in all browsers on same operating-system.

I'm including an example image for reference (direct link) -

SVG image as reference getopensource.info/assets/example-for-stackexchange-question.svg
UPDATE

Maybe I should rephrase my question - Inside an SVG file, how can I make a fixed-width font take same number of pixels across all platforms, assuming the SVG file is not affected by any external CSS styles and the zoom level is normal?

Also, I understand that alternative technologies exists (PNG etc.), but not every SVG question should end with replace it with PNG. Also more than a solution, I'm interested in understanding why this problem exists with SVG. I am using a fixed-width font which is supposed to take same number of pixels on all operating-systems (Is this wrong assumption? Why? What can I do about it?).

Screenshots

Ubuntu 12.04 amd64 / Firefox 13

Ubuntu 12.04 amd64 / Chromium 18

Windows 7 32-bit (inside VirtualBox) / Google Chrome 18

Windows 7 32-bit (inside VirtualBox) / Firefox 13

10.01% popularity Vote Up Vote Down

: Photoshop Pen Tool: draw lines in a vector mask How could I draw lines in a vector mask ? I want to reach the same effect like if I were working with shapes, because the image needs to

@Gretchen549

Posted in: #AdobePhotoshop #Vector

2 Comments

: Transitioning Between Background Colors One problem that frequently stumps me while working on sites is how to transition between two differing background colors elegantly. For instance, the top

@Gretchen549

Posted in: #Background #WebsiteDesign

1 Comments

: Editing gradient in vector image I have a vector image of water. I would like to keep the top wave/bubbles as they are BUT extend the gradient blue on the bottom (to fit the longer length

@Gretchen549

Posted in: #AdobeIllustrator

2 Comments

: How can I create realistic head shots of non-existent people? I want to make some photos of someone who does not really exist, but I don't know where should I start. Initially I wanted to

@Gretchen549

Posted in: #SoftwareRecommendation

2 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Gail6891361

Since you have only linked the SVG and not provided a screen capture to show what your problem is, I can only go by what I see. The image as shown in the question renders improperly because it is not the proper typeface, so your rendering is off because your calculation is predicated on a different letter size and spacing (I see Courier). If I view the SVG in a new tab (or follow the link for the the direct link), it renders properly with Droid Sans Mono and the proper rectangle sizing.

So basically, your problem is a CSS problem where the typeface is being cleared by a parent container or improper calling method. In this respect, I would agree with Lollero that it is off topic for GD.

One way to handle this is to store the font file on your server and render it using PHP GD calls (pretty trivial). You can store the result with a checksum etc so that it will rerender the image only if the text changes and use the stored copy otherwise.

EDIT:___________

A screen capture of your svg file on win7 64bit firefox:

The plain-text contents of your SVG file (XML)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" height="14">
<defs>
<style type="text/css">
<![CDATA[
@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
]]>
</style>
<linearGradient id="g1">
<stop stop-color="#222" offset="0%"/>
<stop stop-color="#444" offset="100%"/>
</linearGradient>
<linearGradient id="g2">
<stop stop-color="#2a2" offset="0%"/>
<stop stop-color="#0a0" offset="100%"/>
</linearGradient>
</defs>


<rect x="0" y="0" width="16" height="14" fill="#222" rx="4" ry="4"/>
<rect x="129.6" y="0" width="8" height="14" fill="#0a0" rx="4" ry="4"/>

<rect x="4" y="0" width="87.2" height="14" fill="url(#g1)" />
<rect x="91.2" y="0" width="42.4" height="14" fill="url(#g2)" />

<text x="6.0" y="10" font-size="10.5" font-family="'Droid Sans Mono', monospace" text-anchor="start" fill="#fff">Ruby on Rails</text>
<text x="93.2" y="10" font-size="10.5" font-family="'Droid Sans Mono', monospace" text-anchor="start" fill="#fff">1 vote</text>
</svg>

10% popularity Vote Up Vote Down

Feed

: How can I keep the font-width consistent in SVG across different operating systems and browsers? I'm trying to add some text to a SVG file. The text is dynamic and shown over a rectangle which

More posts by @Gretchen549

: Photoshop Pen Tool: draw lines in a vector mask How could I draw lines in a vector mask ? I want to reach the same effect like if I were working with shapes, because the image needs to

: Transitioning Between Background Colors One problem that frequently stumps me while working on sites is how to transition between two differing background colors elegantly. For instance, the top

: Editing gradient in vector image I have a vector image of water. I would like to keep the top wave/bubbles as they are BUT extend the gradient blue on the bottom (to fit the longer length

: How can I create realistic head shots of non-existent people? I want to make some photos of someone who does not really exist, but I don't know where should I start. Initially I wanted to

Login to post a comment!

1 Comments

Back to top | Use Dark Theme