Avoid Micron symbol μ to appear as M when using CSS text-transform: uppercase

Question

I have this HTML:

<p class="uppercase">
    aaaaaaaa 9″¾ 5μm
</p>

This CSS:

p.uppercase {
    text-transform: uppercase;
}

I get this result:

AAAAAAAA 9″¾ 5ΜM

How can I obtain this?

AAAAAAAA 9″¾ 5μM

p.uppercase {
  text-transform: uppercase;
}

<p class="uppercase">
  aaaaaaaa 9″¾ 5μm
</p>

Unicode seems to define an uppercase for the micro symbol ([U+00B5](http://www.fileformat.info/info/unicode/char/00B5/index.htm)) in the same way as it does for the actual Greek letter ([U+03BC](http://www.fileformat.info/info/unicode/char/03BC/index.htm)). I don't know if this is for [normalization purposes](http://stackoverflow.com/questions/20674577/how-to-compare-unicode-characters-that-look-alike/20674872#20674872). Not sure there's a way around this save for wrapping the micro in its own element and keeping that element lowercase. — BoltClock, Mar 27 '15 at 10:51
I had the same problem a couple of months ago. Solved it the way @BoltClock suggested. https://jsfiddle.net/cxz28552/1/ — Quad, Mar 27 '15 at 12:18

score -2 · Answer 1 · answered Mar 27 '15 at 12:07

-2

try this code without style

<p class="">
aaaaaaaa 9″¾ 5μm
</p>

answered Mar 27 '15 at 12:07

Mitul Koradiya

1 Answers1