Embed Size (px)
Citation preview
“ ”.length === 1
Arabic Unicode and CalligraphyNick Doiron - @mapmeld
Today I...
WILLhelp you avoid embarrassing errors
explain Arabic / RTL text
show pretty calligraphy
WILL NOT
teach you Arabic
NopeNotArabic.Tumblr.com
But I can’t read Arabic... - Most letters connect
- Words have spaces
- Check left / right ends
Let’s try: multicolor letters
‍ sandwich
These letters are so lonely
User types د then ب then يThey see دبيParens, punctuation flip
Vowels...
Most times: Unicode is magic
Making a right-to-left website
The dir attribute CSS<body dir = “rtl”> [dir=“rtl”] .icon { ... } <input dir = “auto”/></body>
Use English text as a placeholder •
Changes *layout direction* •
Not order of letters / words within tags •
Uneven padding, icons, round corners •
Fun fact:
Numbers inArabicaren’tArabicnumerals
Fun fact:Nastaliq font
SpecialGraphics:
Don’t just
mirror it
Edge cases...
Why do ‘undo’ arrows point left?
Geolocation
FedEx
Final Challenge: Geometric Calligraphy
Based on areal bug in OpenStreetMap
But circle example makes way more sense
Problem
Arabic Unicode: Extended Universe
Arabic Unicode: Extended Universe
لایر
۩ ملسو هيلع هللا ىلص هلالج لج
Quran,Currencies,Calligraphy
Kashida “stretch Arabic”
Google it: github circular arabic
center canvas context
for ( letter in word ) {
char = getExtendedArabic( letter,
{ initial / medial / final })
Draw char + vowels
Draw arc connecting to next letter (if applies)
Rotate (2PI rad / word-length * text-direction)
}
Now in outie and innie styles!
“ ”.length === 1
Arabic Unicode and CalligraphyNick Doiron - @mapmeld
