1.9px text size shown as 1px - Raphael SVG, CSS, Javascript

Question

I have a large Raphael canvas with hundreds of SVGs drawn on it, and am using the "raphael pan and zoom" plugin to zoom in and out.

Because of this, I initially draw my svgs very small, and the user just zooms in/out.

The problem I am having is 2px text size is too large, and 1px text size is too small, however when I try "1.5px", it just gets displayed as 1px text size again.

I am having trouble changing the font size to be 1.5px, or any half size of one (1.2, 1.6, 1.9...)

Here is my code:

...
this.paper.text(x, y, string)
          .attr({'font-family':'myFont', 'font-size':'1.5px'});
...

When I put any number from "1px" to "1.9px", it is rendered as size "1px".
When I put "2px" it is rendered as size "2px".

The CSS for 'myFont' is:

@font-face {
    font-family: 'myFont';
    src:url('fonts/myFont.eot');
    src:url('fonts/myFont.eot?#iefix') format('embedded-opentype'),
        url('fonts/myFont.woff') format('woff'),
        url('fonts/myFont.ttf') format('truetype'),
        url('fonts/myFont.svg#myFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: 'myFont';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* line-height: 1; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-home, .icon-zoom-in{
    font-family: 'myFont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* line-height: 1; */
    -webkit-font-smoothing: antialiased;
    pointer-events:none;
}
.icon-home:before {
    content: "\e000";
}
.icon-zoom-in:before {
    content: "\e001";
}

/* Note: Generated from ico-moon, it's just a font that is a bunch of icons. */

I've tried setting 'line-height' to '0.5', with no luck. Any ideas?

Thanks!

Can you define fractional pixels? I thought they were absolute by nature. — Malk, Dec 18 '13 at 00:54

score 2 · Accepted Answer · edited May 23 '17 at 10:32

All browsers doesn't support for decimal places when you define the width in pixels. In chrome the decimal places are truncated and thus 5.5px or 5.6px becomes 5px. Some browser displays this without truncated.

The width will be rounded to an integer number of pixels.

I don't know if every browser will round it the same way though. They all seem to have a different strategy when rounding sub-pixel percentages. If you're interested in the details of sub-pixel rounding in different browsers, there's an excellent article on ElastiCSS.

Even when the number is rounded when the page is painted, the full value is preserved in memory and used for subsequent child calculation. For example, if your box of 100.4999px paints to 100px, it's child with a width of 50% will be calculated as .5*100.4999 instead of .5*100. And so on to deeper levels.

more about on this q/a

I've learned to avoid text elements in SVG because they are so idiosyncratic across browsers. It's worth mentioning that using Cufonized fonts and Raphael's `print` method is a imminently more flexible approach in most cases... — Kevin Nielsen, Dec 18 '13 at 18:41

1.9px text size shown as 1px - Raphael SVG, CSS, Javascript

1 Answers1