From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/posts/ndenting-text-with-css/index.html | 65 +++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 build/posts/ndenting-text-with-css/index.html (limited to 'build/posts/ndenting-text-with-css') diff --git a/build/posts/ndenting-text-with-css/index.html b/build/posts/ndenting-text-with-css/index.html new file mode 100644 index 0000000..4be11ec --- /dev/null +++ b/build/posts/ndenting-text-with-css/index.html @@ -0,0 +1,65 @@ + + + + + + + + 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

+

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

+

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. +
  2. Replicating book or report typography layouts
    3. +
+

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. +
+

The CSS

+

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

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

Let’s see it in action

+

Live CodePen Example

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf