Upside Down Text With CSS
Join the DZone community and get the full member experience.
Join For FreePreviously I’ve talked about reversing text with CSS by simply setting a few CSS attributes. Today we will try another trick: turning text upside down.
It’s actually possible using a simple CSS property and works cross-browser today. The property to use it “text-gravity” with a value of “inverse”.
<span style="text-gravity: inverse">
write upside down text
</span>
… and this is the result:
ʇxǝʇ uʍop ǝpısdn ǝʇıɹʍ
I’m really surprised to learn that so few people know about this property, and I recommend you to continue reading the W3C specification of text-gravity.
Update: Sorry, I lied :) The above is done with a UTF-8 character generator (see the link the the “specification” above). Amazingly, you can find that most characters have their upside down equivalent somewhere else in the huge Unicode alphabet. Neat trick :)
Published at DZone with permission of Emil Stenström. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
Five Java Books Beginners and Professionals Should Read
-
Step Into Serverless Computing
-
Turbocharge Ab Initio ETL Pipelines: Simple Tweaks for Maximum Performance Boost
-
What to Pay Attention to as Automation Upends the Developer Experience
Comments