From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/ndenting-text-with-css/index.html | 52 ++++++++++++++++++++------------- 1 file changed, 32 insertions(+), 20 deletions(-) (limited to 'build/ndenting-text-with-css/index.html') diff --git a/build/ndenting-text-with-css/index.html b/build/ndenting-text-with-css/index.html index 2687284..0bec7f0 100644 --- a/build/ndenting-text-with-css/index.html +++ b/build/ndenting-text-with-css/index.html @@ -1,48 +1,60 @@ - + CSS: Indenting Text - - + + +
-

CSS: Indenting Text

+

CSS: Indenting Text

+

2019-04-05

-

A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn't an insult - I'm happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.

-

In today's TypeTip we're going to play around with the text-indent property, look into when it's best to use it and how to implement it properly.

-

The property and browser support

+ +

A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn’t an insult - I’m happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.

+ +

In today’s TypeTip we’re going to play around with the text-indent property, look into when it’s best to use it and how to implement it properly.

+ +

The property and browser support

+

Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:

-

- Text indent browser compatibility -
Full support across all browsers.
-

-

Now that doesn't mean you should just slap this property on all your type elements and call it a day - there are specific use cases for text-indent and some basic rules to follow:

-

Use Cases

+ +

Now that doesn’t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for text-indent and some basic rules to follow:

+ +

Use Cases

+
  1. Increasing readability of large text blocks that would otherwise overwhelm the reader
  2. Replicating book or report typography layouts
-

Basic Rules

+ +

Basic Rules

+
  1. Best to set this property on inner type children only - meaning items like p or blockquotes instead of main headings
    2. -
  2. When used on paragraph tags it's best to target only p elements that directly follow a sibling tag (see "The CSS" below)
    3. +
  3. When used on paragraph tags it’s best to target only p elements that directly follow a sibling tag (see “The CSS” below)
-

The CSS

+ +

The CSS

+

Adding the property is extremely trivial, all you need is the following:

-
/* Best practice for paragraphs */
+
+
/* Best practice for paragraphs */
 p + p {
-    text-indent: 1rem; /* whatever you want */
+    text-indent: 1rem; /* whatever you want */
 }
 

-
Let's see it in action

+
+
Let’s see it in action

+
 
Live CodePen Example