loading...
Cover image for  CSS Quickies: text-indent

CSS Quickies: text-indent

lampewebdev profile image Michael "lampe" Lazarski ・2 min read

CSS Quickies (9 Part Series)

1) CSS Quickies: border-radius 2) CSS Quickies: backdrop-filter 3 ... 7 3) CSS Quickies: position 4) CSS Quickies: @supports 5) CSS Quickies: the quotes property and the q HTML tag 6) CSS Quickies: min-height 7) CSS Quickies: text-indent 8) 🤯CSS Pseudo Elements/Classes you have never heard of! 9) CSS Quickies: CSS Multi-column Layout Module

What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments! I answer all the questions.

Lets talk about text-indent in CSS

Sometimes it is needed to indent text on a website. This helps the user to quickly scan the page and understand the context of what he/she is looking at. The first-line Indentation is a common thing in books and magazines. In some scientific papers, it is required to indent every paragraph.

CSS has a property to achieve this behavior. It is called 'text-indent'.

How to use it

You can use typical values, like px, rem, rm, and percentage. The most simple example would be the following.

p {
    text-indent: 4rem;
}
p {
    text-indent: 20%;
}
p {
    text-indent: 100px;
}

The text-indent will indent the first line of your text to the specified amount. With the full-lengths like px, it is clear how much indented it will be, but what about the percentage? How is the percentage calculated? The percentage refers to the width of the containing block. So if the element your text is in is 100px and you won't to indent 20%, then you will have an absolute value 20px. Easy right?

negative indent.

The neat thing about this property is that it will accept a negative length. So we can move the text not only to the right but also to the left. This technic is called "hanging indent" and it used in books and magazines and can elevate your design above the of your competitors.

p {
  text-indent: -2rem;
}

I created a codepen example. In this example, you can play around with text-indent.

each-line and hanging

each-line andhanging` are not implemented in any browser as I'm writing this article in November 2019. So please don't use them in production code. I can not even show you an example. This is how experimental this is.

each-line: the Indentation affects the first line of the block container as well as each line after a forced line break but does not change lines after a soft wrap break.

and

hanging: Inverts which lines are indented. All lines except the first line will be indented. We created this on our own.

👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

CSS Quickies (9 Part Series)

1) CSS Quickies: border-radius 2) CSS Quickies: backdrop-filter 3 ... 7 3) CSS Quickies: position 4) CSS Quickies: @supports 5) CSS Quickies: the quotes property and the q HTML tag 6) CSS Quickies: min-height 7) CSS Quickies: text-indent 8) 🤯CSS Pseudo Elements/Classes you have never heard of! 9) CSS Quickies: CSS Multi-column Layout Module

Posted on by:

lampewebdev profile

Michael "lampe" Lazarski

@lampewebdev

I'm a full-stack web developer. I love to help people.

Discussion

markdown guide
 

I have been using text-indent 30px for a while on my paragraphs for a while on my personal site. Along with setting style, size, weight, line-height, padding. Recently added the following
P::first-letter {
Font-size: 105%
Font-weight: 500:
}
Fairly new and not fully supported by browsers yet.

 

Hi, thanks for writing the article.

"each-line: the Indentation affects the first line of the block container as well as each line after a forced line break but does not change lines after a soft wrap break."

what is meant by "force line break" and "soft wrap break"?

 

It's weird how little paragraphs are indented on the web, I can't remember ever using this.

 

I really appreciate your work and the effort you put into explaining stuffs like this.