CODEWITHSUNDEEP
csstext
Chase O'Grady
Chase O'Grady

Reputation: 31

I need one letter turned upside down in css

I know you can have text upside down but I am trying to have one single letter upside down is this possible?

Upvotes: 3

Views: 6790

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201808

You can use CSS transforms, basically rotation around the x axis. Wrap the letter in a span element and make it an inline block. Example (which works on modern browsers):

<style>
.upsidedown {
  display: inline-block;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg); 
}
</style>
Here is a letter turned upside down: <span class="upsidedown">J</span>

However, CSS transforms tend to produce typographically poor results when applied to letters, especially for serif fonts. It is a also difficult to position rotated elements, e.g. if you would like to make it appear on text baseline (but this was not specified in the question).

Consider analyzing the original problem, trying to find a different approach. For example, if you need to turn a particular letter upside down, you might find a Unicode character that suits your needs

Upvotes: 8

Owen
Owen

Reputation: 1736

Make a span with an upside down class, definining the upside down style, and apply it to a single letter.

<html>
...
Upside down <span class="upsidedown">U</span>.
...
</html>

There are many resources online that discuss how to define 180 degree rotations, for example

http://www.codeproject.com/Tips/166266/Making-Text-Upside-down-using-CSS

Upvotes: 0

Related Questions