Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Wait, ?tahW: The Twisted Road to Right to Left ...

Wait, ?tahW: The Twisted Road to Right to Left Support (LCA2016)

Presented at linux.conf.au Geelong, 2016

Abstract here: http://linux.conf.au/schedule/30151/view_talk?day=wednesday

Moriel Schottlender

February 03, 2016
Tweet

More Decks by Moriel Schottlender

Other Decks in Technology

Transcript

  1. Wait, ?tahW The Twisted Road to Right-to-Left Language Support .

    Moriel Schottlender Collaboration Team The Wikimedia Foundation
  2. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
  3. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
  4. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z This is script А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  5. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  6. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script Hebrew Arabic Latin А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я Cyrillic ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  7. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script Hebrew Arabic Latin А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я Cyrillic LTR Languages: English, Spanish, Russian, French... ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  8. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script LTR Languages: English, Spanish, Russian, French... RTL Languages: Arabic, Hebrew, Yiddish, Persian, Urdu... Hebrew Arabic Latin А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я Cyrillic ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  9. Thinking about RTL exposes issues related to other language behavior

    Solving these technical issues makes your software better
  10. Right-to-Left user base is growing Arabic ~350,000,000 speakers Farsi ~110,000,000

    speakers Urdu ~159,000,000 speakers Pashto ~20,000,000 speakers … and more ...
  11. Right-to-Left user base is growing Arabic ~350,000,000 speakers Farsi ~110,000,000

    speakers Urdu ~159,000,000 speakers Pashto ~20,000,000 speakers ~800,000,000 speakers … and more ...
  12. Right-to-Left user base is growing Persian Wikipedia ~514,000 users ~460,000

    articles Arabic Wikipedia ~1,000,000 users ~375,000 articles Hebrew Wikipedia ~277,000 users ~175,000 articles
  13. Reversed mental model Where your eyes travel on the screen

    Where you expect to see elements on the screen How you define "before" and "after" And "start" and "end" Your expectation from typing and interacting with the content Script direction affects more than just writing and reading
  14. In the beginning, Computers knew not of RTL ASCII ru13z!

    But then The Internet became popular**
  15. In the beginning, Computers knew not of RTL ASCII ru13z!

    But then The Internet became popular** ** Super-overly-simplified revisionist history for the sake of simplicity. There actually were RTL programs before the Internet, but the Internet made the progress for RTL support much more crucial.
  16. In the beginning, Computers knew not of RTL ASCII ru13z!

    But then The Internet became popular** RTL websites sprung up And then ** Super-overly-simplified revisionist history for the sake of simplicity. There actually were RTL programs before the Internet, but the Internet made the progress for RTL support much more crucial.
  17. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324
  18. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324
  19. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  20. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2016 Ubuntu terminal 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  21. … And not just on the web םלוע םולש 2008:

    Ubuntu bug #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2016 Ubuntu terminal 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  22. … And not just on the web םלוע םולש 2008:

    Ubuntu bug #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2016 Ubuntu terminal 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  23. Solution: Logical and Visual rendering Visual: םלוע םולש Logical: םלוע

    םולש Someone had to write this backwards! 1 2 3 4 Byte order: 1 2 3 4 Byte order:
  24. Solution: Logical and Visual rendering ( ) remember these Visual:

    םלוע םולש Logical: םלוע םולש Someone had to write this backwards! 1 2 3 4 Byte order: 1 2 3 4 Byte order:
  25. RTL context Hi... how are you? Typing in LTR and

    RTL ?עמשנ המ ...ייה LTR context Beginning End End Beginning
  26. RTL context Hi... how are you ? Typing in LTR

    and RTL עמשנ המ ...ייה? LTR context Beginning End End Beginning
  27. Unicode Bidirectional Algorithm Strong Weak Neutral Affect entities around them

    Are affected by entities around them Aren't affected and are not affecting (A very generalized and quick primer)
  28. Unicode Bidirectional Algorithm Alphabet Punctuation, Digits* Whitespace, Tabs, etc Strong

    Weak Neutral Affect entities around them Are affected by entities around them Aren't affected and are not affecting (A very generalized and quick primer)
  29. English 1 2 3 Hebrew 1 2 3 English Advanced

    numbers Hint Strong Weak Neutral
  30. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English
  31. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English
  32. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English
  33. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English (This is the Unicode Bidirectional Algorithm)
  34. https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Esc Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ~ ` ! 1 @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Tab Shift Backspace Enter Ctrl Alt Caps Lock Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  35. https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Esc Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ~ ` ! 1 @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Tab Shift Backspace Enter Ctrl Alt Caps Lock Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  36. https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Esc Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ~ ` ! 1 @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Tab Shift Backspace Enter Ctrl Alt Caps Lock Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  37. Caret movement English 1 2 3 תירבע 1 2 3

    English F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  38. English 1 2 3 תירבע 1 2 3 English F1

    F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right Caret movement
  39. Caret movement English 1 2 3 תירבע 1 2 3

    English LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right
  40. English 1 2 3 תירבע 1 2 3 English Visual

    caret movement LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right Caret movement
  41. English 1 2 3 תירבע 1 2 3 English Logical

    caret movement LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right Caret movement
  42. English 1 2 3 תירבע 1 2 3 English Logical

    caret movement LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right forward Caret movement
  43. English 1 2 3 תירבע 1 2 3 English Logical

    caret movement LOGICAL VISUAL Your brain on BiDi Caret movement
  44. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . RTL context LTR context Beginning End End Beginning
  45. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning
  46. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning (text)
  47. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning (text) (טסקט)
  48. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning (text) (טסקט)
  49. Parentheses F5 F6 F7 F8 F9 F10 F11 ^ 6

    & 7 * 8 ( 9 ) 0 _ - + = Y U I O P { [ } ] Ba Web E-Mail −Vol Mute Previous Next Menu Tuner RTL context ) (
  50. F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep

    Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Y U I O P { [ } ] G H J K L : ; ” ’ ¦ \ B N M < > ? Shift Backspace Enter Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , Open Close Parentheses
  51. Control characters RTL context LTR context Beginning End End Beginning

    MSchottlender (WMF) Embedding • <span dir="rtl">...</span> • U+202A: LEFT-TO-RIGHT EMBEDDING (LRE) • U+202B: RIGHT-TO-LEFT EMBEDDING (RLE) MSchottlender (WMF) LRE
  52. Control characters RTL context LTR context Beginning End End Beginning

    MSchottlender (WMF) Isolation • <bdi dir="rtl"></bdi> • U+200E: LEFT-TO-RIGHT MARK (LRM) • U+200F: RIGHT-TO-LEFT MARK (RLM) MSchottlender (WMF)LRM
  53. Control characters RTL context LTR context Beginning End End Beginning

    MSchottlender (WMF) Override • <bdo dir="rtl">...</bdo> • U+202D: LEFT-TO-RIGHT OVERRIDE (LRO) • U+202E: RIGHT-TO-LEFT OVERRIDE (RLO) (FMW) rednelttohcSM RLO
  54. RTL users are used to bad behavior This is how

    computers work By dealing with these questions
  55. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard
  56. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues
  57. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues We make our product better
  58. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues We make our product better We gain more participation from all over the world
  59. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues We make our product better We gain more participation from all over the world We improve our accessibility
  60. Resources • List of Wikipedias: https://en.wikipedia.org/wiki/List_of_Wikipedias • Right to left

    Wikipedias: https://en.wikipedia.org/wiki/Right-to-left#RTL_Wikipedia_languages • Arabic alphabet https://en.wikipedia.org/wiki/Arabic_alphabet • Cyrillic alphabet https://en.wikipedia.org/wiki/Cyrillic_alphabets • Unicode BiDi Control Characters http://www.w3.org/International/questions/qa-bidi-controls • Explosion photo #1 (United States Navy, ID 020712-N-5471P-010, Public Domain), https://commons.wikimedia.org/wiki/File:US_Navy_020712-N-5471P-010_EOD_teams_detonate_expired_ordnance_in_the_Ku waiti_desert.jpg • Explosion photo (Jon Sullivan, Public Domain) https://commons.wikimedia.org/wiki/File:Explosions.jpg • Explosion photo (Jon Sullivan, Public Domain) https://commons.wikimedia.org/wiki/File:Explosions_at_Miramar_Airshow.jpg • Keyboard picture (Public domain) https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg • Rainbow picture, El Granada (CC-by-SA 3.0, Vadim Manuylov) https://commons.wikimedia.org/wiki/File:El_Granada_-_panoramio.jpg • Computer Keyboard, US (Mysid, Public Domain) https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg • Wouldn't want a wooden wheel would you - Flickr – exfordy (CC-by-SA 2.0, Brian Snelson) https://commons.wikimedia.org/wiki/File:Wouldn%27t_want_a_wooden_wheel_would_you_-_Flickr_-_exfordy.jpg • CSSJanus https://github.com/cssjanus/cssjanus