Arabic Unicode and Calligraphy
•
1 like•358 views
This document discusses Arabic Unicode and calligraphy. It explains that most Arabic letters connect, words have spaces, and to check left and right ends of letters. It demonstrates combining letters using Unicode and mentions features of the Arabic language like directionality, numbers, and fonts. The document provides a final challenge to create geometric calligraphy by drawing Arabic letters along a circle.
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
More from Nicholas Doiron
More from Nicholas Doiron (20)
Recently uploaded
Recently uploaded (16)
Arabic Unicode and Calligraphy
- 1. “ ”.length === 1 Arabic Unicode and Calligraphy Nick Doiron - @mapmeld
- 2. Today I... WILL help you avoid embarrassing errors explain Arabic / RTL text show pretty calligraphy WILL NOT teach you Arabic
- 5. But I can’t read Arabic... - Most letters connect - Words have spaces - Check left / right ends
- 6. Let’s try: multicolor letters ‍ sandwich These letters are so lonely
- 7. User types د then ب then ي They see دﺑﻲ Parens, punctuation flip Vowels... Most times: Unicode is magic
- 9. Making a right-to-left website
- 10. 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 •
- 14. Edge cases... Why do ‘undo’ arrows point left? Geolocation FedEx
- 15. Final Challenge: Geometric Calligraphy
- 16. Based on a real bug in OpenStreetMap But circle example makes way more sense
- 17. Problem
- 18. Arabic Unicode: Extended Universe
- 19. Arabic Unicode: Extended Universe ﷼ ﷻ ﷺ ۩ Quran,Currencies,Calligraphy
- 22. 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) }
- 23. Now in outie and innie styles!
- 25. “ ”.length === 1 Arabic Unicode and Calligraphy Nick Doiron - @mapmeld