Rotated text is breaking

Question

I am trying to use Chris Coyier's CSS to put corner-ribbons on my divs..

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font-size: 10px;
  font-weight:bold;
  color: #111;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 3px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

The problem is that, when small and rotated, the text seems to break.

Here's the Fiddle :

http://jsfiddle.net/H6rQ6/8728/

If its not breaking in your browser, here's a snapshot of what i am facing :

enter image description here

Have you seen these? Might be helpful: http://stackoverflow.com/questions/13662935/text-messed-up-when-rotated http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit-transform-in-chrome — showdev, Jun 21 '13 at 19:15
Thanks showdev, adding `translate3d( 0, 0, 0)` to `-webkit-transform` smoothens it completely. But it also blurs it a bit, possibly coz of the antialiasing. — soundswaste, Jun 21 '13 at 20:02

score 1 · Answer 1 · answered Jun 21 '13 at 19:26

you can try force browser to refresh/recalculate layout of text playing with font-style: http://jsfiddle.net/H6rQ6/8730/

.ribbon-green {
    font-weight: bold ;
    font-size:12px;
    font-family:Sans-Serif;
    color: #111; 
     font-variant: small-caps;
    font-size:120%;    /* other rules */
}

edit, actually, it just have to do with font being too small to render smoothly.

regards

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

I resolved this problem, thanks to showdev, by using

-webkit-transform: rotate(45deg) translate3d( 0, 0, 0);

That's because fonts are antialiased by default in chrome, and using translated3d(0,0,0) smoothens them.

More here : Wonky text anti-aliasing when rotating with webkit-transform in Chrome

edited May 23 '17 at 10:30

Community

1
1

answered Jun 27 '13 at 07:34

soundswaste

2,964
3
23
40

score 0 · Answer 3 · answered Jun 21 '13 at 19:00

0

That's completely a browser bug. You can't really avoid it.

answered Jun 21 '13 at 19:00

Mooseman

18,763
14
70
93

Any documentation to back this up? – showdev Jun 21 '13 at 19:08
Fair enough, thanks for checking. It does sound like a browser issue with text rendering. Just strange that I don't see it in the same browser version the OP is using. I'm curious if this has been documented. – showdev Jun 21 '13 at 19:14
At least for me, it's zoom level dependent. If you zoom in and out, for some zoom levels it breaks in another point, or even doesn't break at all. And showing just the same in Canary, and wrong but different in FF – vals Jun 21 '13 at 20:13

Rotated text is breaking

3 Answers3