# CSS text-indent Keywords?

## Метаданные

- **Канал:** CSS Weekly
- **YouTube:** https://www.youtube.com/watch?v=rUOS-zaVrAE
- **Источник:** https://ekstraktznaniy.ru/video/37901

## Транскрипт

### Segment 1 (00:00 - 02:00) []

Did you know that CSS text-indent is a multi-keyword property? Here's what this means and what you need to know about it to improve your typography easily. I've prepared a simple demo to demonstrate how “text-indent” works. The only thing that you need to know is that we will work with this paragraph right here. So notice that I'm having a block of text here, and there is a break inside of that text. You're going to see exactly why this is important in a bit. Let's jump into CSS and let's set “text-indent” to something like “2em” units. You already know what this does. The first line of text in this paragraph will be indented exactly by this value. For this example, I want my second block of text after the break to be indented as well. And to accomplish that, all I need is a keyword next to my text-indent value. And that keyword is “each-line”. The “each-line” keyword tells the browser that you want to indent text after every break in that particular block of text. There is also another keyword that you can use for “text-indent” and that keyword is “hanging”. Let's try it out. Keyword “hanging” actually inverts the effect. So every line of text is indented here for this value except for the first line. And of course, you can combine this with “each-line” as well. So I'm going to add “each-line” keyword here as well. So now every line of text except for the each first line will be indented: exactly the effect that you see here in the demo. So, to easily improve your CSS typography, use those two keywords with “text-indent”. These keywords are, unfortunately, still not in the Baseline. They are supported in Firefox and in Safari. I'm currently in the Safari browser, that's why it's working, but they are not supported in Chrome by default yet. The good thing is that the Chrome team is working on implementing those, and you can test this out in Chrome, in the beta version 146. So if Chrome 146 is out by the time you're watching this video, then this will work for you. If not, well, then you're going to have to try it out in either Safari or Firefox. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you in a different “text-indent” — or rather, in the next video.