Internationalization and Layouts

Slide 1

Slide 1 text

Internationalization and Layouts Ahmad El-Alfy - November 2017

Slide 2

Slide 2 text

• My name is Ahmad El-Alfy. • I wrote my ﬁrst 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Direction and the web

Slide 6

Slide 6 text

The direction attribute was ﬁrst 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)

Slide 7

Slide 7 text

The dir attribute was deﬁned to accept only one of two values; LTR or RTL.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

HTML5 introduced a third value; auto

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

3- Adding the overrides to the same CSS ﬁle style.css

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Introducing the :dir pseudo class selector

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Even if browser support was good … It still means that we should ﬂip the values for everything … margins, paddings, ﬂoats, positions … etc

Slide 29

Slide 29 text

Introducing CSS Logical Properties and Values

Slide 30

Slide 30 text

W3C published the ﬁrst 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

Slide 31

Slide 31 text

Flow relative values These are mainly used with the text-align and the ﬂoat properties one of these four values are assigned to these properties:    start, end, inline-start, inline-end

Slide 32

Slide 32 text

Flow relative box-model properties This mainly aﬀect the properties margin, padding or borders The property name is added to one of the following suﬃxes    block-start, block-end, inline-start, inline-end

Slide 33

Slide 33 text

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)

Slide 34

Slide 34 text

In an LTR Element In an RTL Element

Slide 35

Slide 35 text

What about the short-hand version?

Slide 36

Slide 36 text

The logical keyword In an LTR Element In an RTL Element

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

The logical oﬀsets In an LTR Element In an RTL Element

Slide 39

Slide 39 text

Webkit support a slightly diﬀerent version of the syntax -inline-start ,-inline-start: start, end respectively -block-start, -block-end: before and after respectively

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

We care because there is something called CSS Writing Modes

Slide 45

Slide 45 text

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/