Internationalization and Layouts

My presentation during DevC Cairo Meet-up on 11th of November 2017. Talking about the new logical properties and values and how to use them in production today.

Transcript

1. Internationalization and Layouts
   Ahmad El-Alfy - November 2017
   

   View Slide

2. • My name is Ahmad El-Alfy.
   
   • I wrote my first HTML document nearly 20 years ago.
   
   • Development head and front-end developer at
   
   • Facebook Developers Circle Cairo Lead.
   
   • Web standards and Accessibility fanatic.
   Twitter: ahmadalfy

   Ask.fm: ahmadalfy
   

   View Slide

3. Mobile Design and Usability
   https://goo.gl/mzbHDK
   

   View Slide

4. Facebook Partner Developer Workshop
   https://fbpartnerworkshopcairo2017.splashthat.com/
   

   View Slide

5. Direction and the web
   

   View Slide

6. The direction attribute was first introduced in HTML4 in December 1997*
   In HTML, it’s advised to use the HTML direction in conjugation with the
   language attribute
   * https://www.w3.org/TR/1998/REC-html40-19980424/struct/dirlang.html
   • Properly display text
   
   • Assisting search engines, speech synthesizers, spell and grammar checkers
   
   • Assist user agent with other issues (quotation marks, hyphenation, ligatures)
   

   View Slide

7. The dir attribute was defined to accept
   only one of two values; LTR or RTL.
   

   View Slide

8. View Slide

9. HTML5 introduced a third value; auto
   

   View Slide

10. auto is really special because it uses a
    “complex algorithm” to detect the direction
    of an element “based on its content”
    

    View Slide

11. View Slide

12. * https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute
    

    View Slide

13. View Slide

14. Browser support is
    actually good

    Except for …
    * https://www.w3.org/International/tests/repo/results/the-dir-attribute-auto
    

    View Slide

15. Changing the direction was sufficient
    back in the old days when we used to
    build layouts using tables.
    
    Tables didn’t need any special
    attention as their direction was
    automatically flipped when we altered
    the direction.
    
    When we started to build layouts using
    CSS and floats, we had to explicitly
    switch the values of some of the
    properties we used to use.
    

    View Slide

16. View Slide

17. 1- Using different file
    for the RTL version
    This method was popular due to rise of
    different tools that automatically parse the
    CSS files and produce an RTL version
    style.css
    style-rtl.css
    

    View Slide

18. 2- Loading an additional file
    that only contains the
    overriding properties
    Creating a file that contains only the
    necessary properties that override the
    original CSS and load it last style.css
    style-rtl.css
    +
    

    View Slide

19. 3- Adding the overrides
    to the same CSS file
    style.css
    

    View Slide

20. View Slide

21. View Slide

22. This was how we always used to work. In
    fact; this is how most of us are still doing it.
    It might not be efficient but it’s the only way
    we had.
    

    View Slide

23. View Slide

24. Introducing the :dir
    pseudo class selector
    

    View Slide

25. View Slide

26. So what’s the difference between
    :dir(rtl) and [dir=“rtl”]
    

    View Slide

27. View Slide

28. Even if browser support was good …
    It still means that we should flip the values for everything …
    margins, paddings, floats, positions … etc
    

    View Slide

29. Introducing CSS
    Logical Properties
    and Values
    

    View Slide

30. W3C published the first public draft
    on 18 May 2017.
    
    It provide the author with the ability to
    control layout through logical, rather
    than physical, direction and dimension
    mappings.
    Flow Relative
    Box Model
    Properties
    Flow-Relative
    Background and
    Border-image
    Properties
    Flow relative
    values
    

    View Slide

31. Flow relative values
    These are mainly used with the text-align and the float properties
    
    one of these four values are assigned to these properties:

    

    start, end, inline-start, inline-end
    

    View Slide

32. Flow relative box-model properties
    This mainly affect the properties margin, padding or borders
    
    The property name is added to one of the following suffixes

    

    block-start, block-end, inline-start, inline-end
    

    View Slide

33. block-start

    means the vertical aspect where drawing starts (e.g. top)
    
    block-end

    means the vertical aspect where drawing ends (e.g. bottom)
    
    inline-start

    means the horizontal aspect where drawing starts (e.g. left in LTR)
    
    inline-end

    means the horizontal aspect where drawing ends (e.g. right in LTR)
    

    View Slide

34. In an LTR Element In an RTL Element
    

    View Slide

35. What about the short-hand version?
    

    View Slide

36. The logical keyword
    In an LTR Element
    In an RTL Element
    

    View Slide

37. How about the position properties
    (top, right, bottom, left) ?
    

    View Slide

38. The logical offsets
    In an LTR Element In an RTL Element
    

    View Slide

39. Webkit support a slightly different version of the syntax
    -inline-start ,-inline-start:
    start, end respectively
    
    -block-start, -block-end:
    before and after respectively
    
    

    View Slide

40. View Slide

41. View Slide

42. * https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csslogicalpropertieslevel1/
    

    View Slide

43. View Slide

44. We care because there is something called
    CSS Writing Modes
    

    View Slide

45. Disclaimer
    Illustrations on this part are taken from an article published under
    the title “CSS Writing Modes” By “Jen Simmons” published on
    24ways.org
    https://24ways.org/2016/css-writing-modes/
    

    View Slide

46. View Slide

47. View Slide

48. * https://codepen.io/jensimmons/pen/ZBmwLo
    

    View Slide

49. inline-start inline-end
    block-end
    block-start
    

    View Slide

50. inline-start
    inline-end
    block-end block-start
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. Now how do we
    put this magic
    into practice?
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. Pick your own flavor
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Thank you
    

    View Slide