2.5 Position and Float

Welcome back to the course. In this final lesson, we're learn how to use the float and position properties as logical. Let's begin with position. For this I have prepared, again, a very simple demo. Let's call it a typical navbar, where you have the logo and a button on the other side that acts as a trigger for a drop down menu, right? So again, we're using English and Arabic to demonstrate LTR and an RTL layout. Now to position this icon, which is an i element, I'm setting it's positioned to absolute, and then I'm setting the right property to 2 rems, and the top to 1.2 rems. And as you can see on the RTL layout, this is in the incorrect position, so to fix that without using logical properties, we would do this RTL and was that navbar i and we would set the left to two rems instead of right. Right we will set to auto, but we can avoid this altogether by using logical properties instead of right, top, bottom, and left. So instead of these two I can simply say instead of right inset, inline-end that's be equal to 2 rems. And for the top, we can say insert-block-start to 1.2 rems. Please notice that insert block start is not necessarily required here because we're not working with vertical layouts. But I thought I would use it anyway to show you what the replacement value for top is when it comes to positioning elements. So all of these positioning properties top, right, bottom, left, start with inset, left and right are continued with inline, and then left will be start right will be end. For top and bottom, we continue with block, and then top will be start bottom will be end, so I hope that makes sense. Now unlike the other logical properties that I've talked about, there's also a shorthand property for top, right ,bottom, left, and that's called inset. So let me just write here, this is a shorthand, and you will do this inset top will be 1.2 rems. Right will be two rems, and then auto auto, but here's the kicker, see that? This is now not positioned correctly, and that's because inset is indeed a shorthand, but it defines physical offsets, not logical ones, so be very, very careful with this. In translation, this would mean top is 1.2 rems, right is two rems, and then bottom left are both auto on both layouts. So LTR and RTL as I said, these are physical, they are replaced with physical properties not logical ones. So while this shorthand does exist, and strangely enough, it is defined in the CSS logical properties spec, it does not define logical properties but physical ones. So there you have it, top, bottom, left, right can be replaced with inset block start and block end and inset inline start and inline end when it comes, of course, to positioning elements. Now let's see about CSS floats. For a float, I have another, a very simple layout. It's a card with an image that has at this property applied to it. Let me just find it, here we go. Shape outside circle, so that means the text will nicely follow the curvature of that image. This is probably the only use for float in 2021, I would definitely not be using float for creating layouts. Anyway, this is what it looks like on the English layout, the LTR layout, right? Image on the left, we have a nice margin here between the image and the text. So let's see how this should look like on the Arabic, the RTL layout. If we were to go the old fashioned way and not use logical properties, I would probably do something like this. I would say float left or, excuse me, right now it says float left, we need to set it to float right. And we need to set the margin left to 3 rems and margin right to zero, so that will make sure that our layout looks correct. Also, something else you might have noticed that is that I switch to browsers, I'm now using Firefox because Safari wouldn't actually support the logical properties for float. So to properly show you, I switch to Firefox. Now this is the way we would do it without using logical properties, but because this course is about logical properties, let's go ahead and do this right. So instead of margin right, we would say margin in line and 3 rems. And instead of float left, we're gonna say float in line start. So in this particular instance, we're replacing left with inline start, and we're replacing write with inline and, okay? So float with the value in line start replaces float with the value of left. And by doing that, we now have the correct layout in both LTR and RTL directions. All right, and that's about it for position and float. And for this course, I hope you found it useful, and it gave you all the information you need to start working with CSS logical properties. Thank you very much for watching. I'm Adi, and until next time, take care.