0
<div style="position: relative; left: 30px; top: 20px; width: 200px; height: 30px; border: solid 1px black; text-align: center; vertical-align: middle; line-height: 30px; text-transform: full-width;">
<span style="color: #999999; font-family: tahoma; font-size: 12px; text-transform: full-width;" onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#999999';">Example Text</span></div>

http://jsfiddle.net/CQwbQ/

So I have some text inside of div, and I've noticed that text-transform doesn't have effect in Opera (it works normally in Firefox). I have the latest Opera version.

I tried all combinations - putting text-transform: full-width; in span, than in div, than in both...

How can this be fixed?

Community
  • 1
  • 1
weaponx
  • 135
  • 5
  • 18
  • In general, if you want to see if certain browsers support certain CSS features, search on MDN. In this particular case, https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#Browser_compatibility shows many differences in implementation, so it might be best not to use this feature in production just yet. – Mr Lister Sep 20 '13 at 13:07
  • you might be right about not using this feature in production, because it seems that Opera and Firefox displays full width characters differently - http://jsfiddle.net/CQwbQ/2/ – weaponx Sep 20 '13 at 13:36

1 Answers1

3

The text-transform value of full-width is currently supported by Firefox only. You could submit a bug report to Opera, but since the value is defined in a Working Draft level document only (CSS Text Module Level 3), I don’t think it would get much attention.

Workarounds:

1) Add a piece of JavaScript code that replaces ASCII characters by corresponding fullwidth characters (e.g., “A” by U+FF21) in applicable parts of the content.

2) Do the same replacement server-side or with preprocessing. More robust.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I've just tried one converter (http://www.linkstrasse.de/en/%EF%BD%86%EF%BD%95%EF%BD%8C%EF%BD%8C%EF%BD%97%EF%BD%89%EF%BD%84%EF%BD%94%EF%BD%88%EF%BC%8D%EF%BD%83%EF%BD%8F%EF%BD%8E%EF%BD%96%EF%BD%85%EF%BD%92%EF%BD%94%EF%BD%85%EF%BD%92) and it generally works, but it gives drastically different result in FF and O. see: http://jsfiddle.net/CQwbQ/2/ – weaponx Sep 20 '13 at 13:19