2.2 Text Alignment

Welcome back to the course. In this lesson, we're gonna learn how to use the text align property with logical values. Let's begin. I prepared a very simple demo for you here. We have the page split up in two, basically, on this side we have a left to right layout written in English. On this side, we have a right to left layout written in Arabic. And, before we get started, let me just make this quick note, and this is true for all the other videos in this course, I do not speak Arabic. So, I relied on Google Translate how to translate from English to Arabic, and I just copied and pasted the generated text. So, if for some reason this did not get translated properly, I do apologize, but it's the best that I could do. So, let's get back to our layout. We have a simple form, or actually a form field that has a label, an input and a helper text. So, the label and input are both aligned to the left, but the helper text is aligned to the right, as you can see from this piece of CSS. Okay, so helper text align right. Now on the right to left layout, this piece of text is also aligned to the right side, but it should be the other way around, so it should be aligned towards the end of the text, which in this particular case, is this side, okay? Let's call it the left side, so, here the layout is right to left. So, the helper text should be aligned on this edge. We can very easily do that, and target the RTL container that we have here, and then the helper class, and we can say, hey text align left. Okay, and that will move it. But, because I wanna use logical properties to have this alignment be automatic, regardless of the direction of the text, I'm gonna do the following, I'm gonna comment this piece of text, I'm gonna comment, this text alignment, and instead of right, I'm gonna say text-align: end, okay? And that does it automatically for me. On the LTR layout, it aligns it to the right side, or to the end of my inline axis. On the RTL, it correctly aligns it to the left, which is the end of the inline axis. Remember, this goes right to left. And just with one line of code, I managed to avoid targeting items separately in the RTL container. Very, very cool. So as values, you can use start, which will align elements to the start of the inline dimension, or end, as you saw right now, of course, center still works, this has nothing to do with logical properties. But in this particular case, text-align: end is the solution to our problem. All right, and that's how you can use a logical values for the text align property. As you'll see in the upcoming lessons, you won't always use start and end as values, but instead you'll be using them as part of the property name. Now let's move on to margins, paddings, and borders. These can also be used as logical properties, and I'll show you how in the next lesson. See you there.