2.1 Content Direction and Logical Properties

Welcome back to the course, in this lesson you're gonna learn about content direction, and how it affects logical properties. Let's go. At some point in your web development career, you're gonna stumble upon a few acronyms like LTR, RTL, TB, so what's up with all of these? Well, they represent directions, Right To Left, Left To Right, and Top To Bottom. These can be used to set the content direction in a page using the direction and a writing mode CSS properties. The direction property sets the direction of text. For English, and most other languages, you would use ltr, or left to right. But, there are also languages written from right to left, like Arabic, and Hebrew. These will use rtl as a value for the direction property. The writing mode property sets a whether your block content is displayed horizontally or vertically. This is useful because there are scripts that need to be displayed vertically like Chinese and Japanese. So why should we care about all of this? Well, to answer that, you must first understand the difference between logical and physical properties. Now, we all know and have worked with physical properties before, for example, margin left, padding right, or border top. These are called physical because they point to very specific boundaries in your typical layout, left, right, top, and bottom. Logical properties on the other hand will describe those boundaries as start and end. And this is super helpful when dealing with non-standard writing directions. For example, given the following paragraph, if you want to add some margin after the text, you would use margin-right, that's the physical properties approach. But if we change the text to Arabic and the direction to rtl, then margin right will still add that margin to the right side of the paragraph, which is now before the text. In this case, we would need to change the physical property to margin-left. So, you might think that it's not that hard. I mean, I can easily detect the direction in CSS and apply the left or right margin property accordingly, right? That's true for a couple of elements, but if you have an entire website that needs to be displayed in Arabic, for example, and all of a sudden, all the stuff that was pointing to the right now needs to point to the left and vice versa. Then you have a bigger problem on your hands because that's gonna take a lot of time. Well, this is where logical properties come in. In this example, we've replaced margin-right with margin-inline-end, and I'll talk about the syntax in just a little bit. But notice that margin-inline-end will set the proper margin after the text, regardless of the text direction. Because in an LTR layout inline-end translates to right, and in an RTL layout, it translates to left. It all depends on where the element starts and where it ends. Now the syntax is pretty easy to understand, and it all starts with the two dimensions, horizontal and vertical. Logical properties use the dimensions of block, instead of vertical and inline, instead of horizontal. Block will define how block level elements like paragraphs will be laid out in a page. Inline will define how inline elements are laid out in a page, for example, the characters in a paragraph. Now, what I just said is true for horizontal languages. So, in English or in any other language that is written left to right, or right to left, so horizontal block will refer to the vertical dimension, and inline will refer to the horizontal dimension, okay? In Chinese or Japanese or any other languages that are written in a vertical mode, it's the other way around. The block dimension will now be horizontal and the inline will be vertical. All right, so now that you understand the dimensions of block and inline, let's combine those with start and end. Let's consider this piece of text written in English, so horizontal, left to right. The block dimension will go from top to bottom, and the inline dimension will go from left to right. To represent top, we'll say block-start because that's where the block dimension starts. Bottom will be where the block dimension ends, so block-end. To represent left, we'll say inline-start, because that's where the inline dimension starts. And right will be where the inline dimension ends, so inline-end. Now let's look at the same text in Arabic. The block dimension is the same as before, top to bottom, but the inline dimension will now go from right to left. So, in this case, left will be inline-end, and right will be inline-start. The top and bottom values are the same, block-start and block-end. So, once you understand this, it's actually quite simple to implement these logical properties. Although their syntax is different depending on what properties you're using, and we'll explore that in the upcoming lessons. As a general rule, you would basically replace top bottom, left and right with their logical counterparts, block-start, block-end, inline-start, and inline-end. So, for example, margin-right will become margin-inline-end, top will become block-start, and so on and so forth. Now, what CSS properties can we use as logical? Well, based on this page from MDN, most of them actually and you can check out the full list by using the link in the description. But in this course, we'll be focusing on the most common ones, text-align, width and height, margin, padding, and border, position, and float. Yes, that is correct Flexbox and Grid are logical by default. If you've ever used any of these tools in the past, then you might remember that you never actually used physical properties on any of them, like top, left, right, bottom. Instead, you would use logical properties, for example, in Flexbox to align flex items you would use flex-start and flex-end among other values, of course. But Grid and Flexbox will always follow the writing direction of the document. At the time of this recording, which is the spring of 2021, browser support is okayish. The latest versions of Edge, Firefox, and Chrome fully support logical properties while the other browsers support only a few. But, I have no doubt that the support will only get better moving forward. All right, so now we know all this theory about a CSS logical properties and it's time to put it to good use. So, in the following four lessons we'll be talking about specific CSS properties that can be used as logical, and the best way to use them. Coming up is text alignment, and I'll see you in the next lesson.