~uglyduck/uglyduck.srht.site

ref: 327101a41134614ca313db49525e7846b6b7efed uglyduck.srht.site/_site/indenting-text-with-css/index.html -rw-r--r-- 5.6 KiB
327101a4 — Bradley Taunt Slowly running through past articles to ensure proper layout and styling 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
<!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="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility" />
    <figcaption>Full support across all browsers.</figcaption>
</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>