Rotated text using Courier font not displayed in Opera

Asked 17/9, 2012 at 13:58 Answered 27/4, 2013 at 10:58

I have the following HTML:

<div class='box'>text</div>

and CSS:

.box {
    /* non-essential */
    display: inline-block;
    margin: 2em;
    background: plum;

    /* ESSENTIAL */
    transform: rotate(45deg);
    font-family: Courier;
}

And this is the fiddle. I've omitted the prefixes here, but they are in the fiddle.

Expected result:

expected result

It is also the result I get in Chrome, Firefox, IE9, Safari.

However, in Opera it looks like this:

opera result

If I take out the transform (that is, the div is not rotated anymore), then the text is shown.
If I replace the font with another one, then the text is shown.

So why is this happening and what other solutions do I have?

In case this helps:

about opera

Palladio answered 17/9, 2012 at 13:58 Comment(6)

not an answer, just FYI - on Mac it works perfectly in Opera – Khorma 17/9, 2012 at 14:4

Have you tried using a vendor specific prefix to see if that helps? -o-transform: rotate(45deg); – Traynor 17/9, 2012 at 14:5

@BillyMoat Yes, she did - have you seen the fiddle? – Khorma 17/9, 2012 at 14:6

@ZoltanToth - Ah, only looked at the code posted here - my bad. – Traynor 17/9, 2012 at 14:8

Maybe during the transformation the text becomes too slim to be visible. Have you try to increase the font-size or with a different angle ? – Surveyor 25/9, 2012 at 9:59

My theory is, Opera do support a (.fon) font type, and this font type might not have the functionality to display the text with transform property (confirm it with .fon extension, e.g “Roman”). If we verify the font face on Chrome, it was rendered in “Courier New”/fallback font and not the Courier(Courier Regular – verify this on your OS font list). – Maxma 15/10, 2012 at 17:27

Why is this happening

It's happening because Opera has resolved Courier to courier.fon a bit-mapped font, and Opera has not implemented rotation for bit-mapped fonts.

You get the same results with Modern and Roman and any other font where you have a .fon version.

You can look in C:\Windows\Fonts for a complete list.

What other solutions do I have

If you are relying on the exact metrics of the font when it is presented on the page, you may want to consider using a web font.

If calling the font "courier" is important, then you could ignore opera: It's not very popular, this is a bit of an obscure bug, and since Opera is ditching Presto for Webkit, it simply involves waiting.

Cape answered 27/4, 2013 at 10:58 Comment(0)

-1

If you change the font-family tag to the below it works:

font-family:"Courier New", Courier, monospace;

http://jsfiddle.net/3tTyp/1/

Traynor answered 17/9, 2012 at 14:12 Comment(2)

I know it works, I mentioned that in the question. It works if I use monospace, Courier New, Arial, Helvetica... but not Courier. I was asking for a way that does not involve removing the transform or changing the font-family. – Palladio 17/9, 2012 at 14:15

Apologies, I'm evidently not paying enough attention today :( – Traynor 17/9, 2012 at 14:15

Why is this happening

What other solutions do I have

Recommended topics

Hot tags