From dc6db80fa72286704849ef61ee0e5ccb5841cb09 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:28:49 -0400 Subject: Conversion to barf for testing purposes --- _posts/2019-04-05-ndenting-text-with-css.md | 47 ----------------------------- 1 file changed, 47 deletions(-) delete mode 100644 _posts/2019-04-05-ndenting-text-with-css.md (limited to '_posts/2019-04-05-ndenting-text-with-css.md') diff --git a/_posts/2019-04-05-ndenting-text-with-css.md b/_posts/2019-04-05-ndenting-text-with-css.md deleted file mode 100644 index 3335c8a..0000000 --- a/_posts/2019-04-05-ndenting-text-with-css.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: "CSS: Indenting Text" -date: 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: - -
- 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 - -1. Increasing readability of large text blocks that would otherwise overwhelm the reader -2. Replicating book or report typography layouts - - -## Basic Rules - -1. Best to set this property on inner type children only - meaning items like `p` or `blockquotes` instead of main headings -2. 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 - -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](https://codepen.io/bradleytaunt/pen/OGXLEd/) -- cgit v1.2.3-54-g00ecf