$30 off During Our Annual Pro Sale. View Details »

Internationalization and Layouts

Ahmad Alfy
November 11, 2017

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.

Ahmad Alfy

November 11, 2017

More Decks by Ahmad Alfy

Other Decks in Programming


  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

    View Slide

  4. Facebook Partner Developer Workshop

    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

    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

    View Slide

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

    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
    Flow Relative
    Box Model
    Background and
    Flow relative

    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)


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


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


    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

    View Slide

  46. View Slide

  47. View Slide

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

    View Slide

  49. inline-start inline-end

    View Slide

  50. inline-start
    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