~uglyduck/uglyduck.srht.site

ref: 494dcd504bd6ebb68b59e8a04057b0a087570d38 uglyduck.srht.site/_site/indenting-text-with-css/index.html -rw-r--r-- 6.5 KiB
494dcd50 — Bradley Taunt tweaking overall design - still very much a WIP 6 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>
    
      CSS: Indenting Text &middot; Ugly Duck
    
  </title>
  <meta name="description" content="Implement better typography styling by taking advantage of text-indent">
  <link rel="shortcut icon" href="/favicon.png">
  <link rel="alternate" type="application/atom+xml" title="Ugly Duck" href="/feed.xml">
  <link rel="stylesheet" href="/style.css">
</head>


  <body>
    <header role="banner">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

</header>

    <main id="main" role="main">
      <header>
        <h1>CSS: Indenting Text</h1>
      </header>
      <hr>
      <article class="">
        <p><em>Posted on <time datetime="2019-04-04T20:00:00-04:00">April 4, 2019</time></em></p>
        <hr>
        <p><em>A lot of developers tend to do the bare minimum</em> 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.</p>

<p>In today’s <em>TypeTip</em> we’re going to play around with the <code class="language-plaintext highlighter-rouge">text-indent</code> property, look into when it’s best to use it and how to implement it properly.</p>

<h2 id="the-property-and-browser-support">The property and browser support</h2>

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

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/text-indent-compatibility.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/text-indent-compatibility.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/text-indent-compatibility.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/text-indent-compatibility.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp 1200w" sizes="100vw" alt="Text indent browser compatibility" width="2084" height="868" crossorigin="anonymous" />
    <span class="marginnote">Full support across all browsers.</span>
</figure>

<p>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 <code class="language-plaintext highlighter-rouge">text-indent</code> and some basic rules to follow:</p>

<h4 id="use-cases">Use Cases</h4>

<ol>
  <li>Increasing readability of large text blocks that would otherwise overwhelm the reader</li>
  <li>Replicating book or report typography layouts</li>
</ol>

<h4 id="basic-rules">Basic Rules</h4>

<ol>
  <li>Best to set this property on inner type children only - meaning items like <code class="language-plaintext highlighter-rouge">p</code> or <code class="language-plaintext highlighter-rouge">blockquotes</code> instead of main headings</li>
  <li>When used on paragraph tags it’s best to target only <code class="language-plaintext highlighter-rouge">p</code> elements that directly follow a sibling tag (see “The CSS” below)</li>
</ol>

<h2 id="the-css">The CSS</h2>

<p>Adding the property is extremely trivial, all you need is the following:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Best practice for paragraphs */</span>
<span class="nt">p</span> <span class="o">+</span> <span class="nt">p</span> <span class="p">{</span>
    <span class="nl">text-indent</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="c">/* whatever you want */</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="lets-see-it-in-action">Let’s see it in action</h2>

<p class="codepen" data-height="460" data-theme-id="0" data-default-tab="css,result" data-user="bradleytaunt" data-slug-hash="OGXLEd" data-preview="true" style="height: 460px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Simple text-indent">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/OGXLEd/">
  Simple text-indent</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>


      </article>
      <br>
      <footer role="contentinfo" id="menu">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </small>
    <hr>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>
    
  </body>
</html>