Tuesday, 16 January 2018

Computer Science Internationalization - Rotating Unicode Characters

I sometimes encounter Unicode characters that have direction and sometimes that direction is not the direction I want. Letʼs take the character 👀 . The eyes are looking to the right. Recently I wanted the eyes to look to the left. Using CSS we can change the direction so that we have left looking eyes  👀 . Here is the inline CSS I am using in this blog article to produce left looking eyes  👀 .

<span style="display:inline-block;transform:rotate(180deg);vertical-align:15%;">
👀
</span>

福 is considered an auspicious character in the Chinese culture. If you search the net google.co.uk/search?q=福&tbm=isch you will find many images of 福 and many of these images are of an upside down 福。The CSS I use to display is exactly the same as above.

Letʼs display a that has a bit more impact.

Here is the CSS I use to display the big red .

<span style="display:block;transform:rotate(180deg);text-align:center;
text-shadow: -4px -4px 4px Grey;text-weight:800;font-size:100pt;
font-family:'Hannotate SC',cursive;color:Red;">
福
</span>

Why ? It is all to do with homophones, words that sound the same(ish). Here is an explanation from en.wikipedia.org/wiki/Fu_(character)

When displayed as a Chinese ideograph, Fú (福) is often displayed upside-down on diagonal red squares. The reasoning is based on a wordplay: in nearly all varieties of Chinese: the words for "upside-down" (倒, Pinyin: dào) and "to arrive" (到, Pinyin: dào) are homophonous. Therefore, the phrase an "upside-down Fú (福)" sounds nearly identical to the phrase "Good luck arrives". Pasting the character upside-down on a door or doorpost thus translates into a wish for prosperity to descend upon a dwelling.