Improve CSS3 Text Rotation Quality

Improve css3 text rotation quality

Chrome

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

transform: translate3d(0,0,0);

This will force the browser to use its hardware acceleration to calculate the transforms, which will add some anti-aliasing as a bonus.

The same effect could also be applied by setting the -webkit-backface-visibity to hidden:

-webkit-backface-visibility: hidden;

Here is your updated jsfiddle (tested in Chrome)

http://jsfiddle.net/9eGt3/6/

Firefox

Firefox enables anti-aliasing by default so no transform3d hack is required, but the quality of the anti-aliasign algorithm varies among the browser version. Here are some comparison images:

Those are Firefox 5, Firefox 9 and Chrome respectively.

Your best bet here is to tweak your font in order to make it more friendly to the anti-aliasing algorithm. In this case, choosing a bolder and bigger font might help.

Css rotated text is jaggy

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

-webkit-backface-visibility: hidden;

Fiddle

Vertical Text Direction

Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

css rotate and alignment

For rotating the content, as a start, you'll need to set the transform-origin, the point that should be used as the center of rotation. You may also have to give the rotated element a fixed width in px or em (it didn't seem to work well when I tried it with a width in %). And be sure to use the full range of selector prefixes for transform and transform-origin to support the different browsers.

Something along the lines of the following:

-webkit-transform-origin: 0 0;
-moz-transform-origin:    0 0;
-ms-transform-origin:     0 0;
transform-origin:         0 0;

-webkit-transform: rotate(90deg);
-moz-transform:    rotate(90deg);
-ms-transform:     rotate(90deg);
transform:         rotate(90deg);

Edit:

Here's a simplified version that may get you slightly closer. In the following CSS, I'm setting a fixed width for the content (in this case 400px), and forcing 100px of top and left spacing for the rotated content. In this example I'm not attempting to center the content, but the placement can be adjusted by editing the CSS (to make it look more centered). This doesn't address multi-page printing (especially how to do so with rotated content), but hopefully it's a step in the right direction:

.card {
    width: 400px;
    background-color: #eee;  /* Temporary bg color, for testing */

    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    transform-origin:         0 0;

    -webkit-transform: translate(100px, 500px) rotate(-90deg);
    -moz-transform:    translate(100px, 500px) rotate(-90deg);
    -ms-transform:     translate(100px, 500px) rotate(-90deg);
    transform:         translate(100px, 500px) rotate(-90deg);
}

Here's a jsfiddle demo. In the translate functions, the 500px is 400px for the width plus 100px top spacing. Adjust the width and the translate() values as needed to experiment with it.

You may have to avoid using % for either the width or height of the content (or at least, it may be far simpler if you can avoid doing so).

Prevent SVG Text rotation with CSS

Create a group around the elements that you want to rotate.

rotate them

Adjust the rotation center to the center of the circle to avoid translating it

.inner {

    transform-origin: 60px 60px;

    transform: rotate(-90deg);

}

.progress__value {

    stroke-dasharray: 339.292;

    stroke-dashoffset: 339.292;

}

<div class="demo">

    <svg class="progress" width="100px" height="100px" viewBox="0 0 120 120">

        <text x="44" class="counter" y="66" fill="#262626" style="

    font-weight: 700; font-size: 16px;

">30%</text>

        <g class="inner">

        <circle cx="60" cy="60" r="54" fill="none" stroke="#DDDDDD" stroke-width="12" />

        <circle class="progress__value"  cx="60" cy="60" r="54" fill="none" stroke="#262626" stroke-width="12" />

        </g>

    </svg>

</div>

---

Related Topics