build/posts/character-unit/index.html


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

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>CSS Character Unit</title>
	<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>

<nav>
	<a href="#menu">Menu &darr;</a>
</nav>

<main>
<h1 id="css-character-unit">CSS Character Unit</h1>
<p>2019-04-23</p>
<p><em>When it comes to proper readability with large portions of text</em>, the golden standard is to have no more than <a href="http://webtypography.net/2.1.2">75 characters per line</a>. This is easy to achieve in the world of print but on the responsive, ever-changing web - statically defined typography becomes a little more difficult.</p>
<p>You could go through the long process of setting up media queries for every possible screen size, adjusting text size and padding accordingly - but there is a <em>better way</em>.</p>
<h2 id="introducing-character-units">Introducing character units</h2>
<p>By setting your main containers or text elements with the CSS character unit (<code>ch</code>), you need to set the character length only once. Let&#8217;s look at a simple example for reference.</p>
<p>Let&#8217;s say you have an article which will fill the entire length of the screen. Something like this:</p>
<pre><code>&#60;div class="container"&#62;
    &#60;p&#62;Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.&#60;&#47;p&#62;
    &#60;p&#62;Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.&#60;&#47;p&#62;
&#60;&#47;div&#62;
</code></pre>
<p>With this structure, you might normally set the default <code>max-width</code> property with your desired maximum width (whatever you believe is the best reading length):</p>
<pre><code>.container {
    max-width: 38em;
}
</code></pre>
<p>This works - but it isn&#8217;t ideal. Time for character units to save the day! You will still target the <code>max-width</code> property but this time we set it to use the <code>ch</code> value like so:</p>
<pre><code>.container {
    max-width: 66ch;
}
</code></pre>
<p>This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort.</p>
<h2 id="browser-support">Browser support</h2>
<p>The character unit attribute has pretty great support - even partial IE11! Check out the supported browsers <a href="https://caniuse.com/#feat=ch-unit">here</a>.</p>
<footer role="contentinfo">
    <h2>Menu Navigation</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/uses">Uses</a></li>
        <li><a href="/wiki">Wiki</a></li>
        <li><a href="/resume">Resume</a></li>
        <li><a href="/colophon">Colophon</a></li>
        <li><a href="/now">Now</a></li>
        <li><a href="/donate">Donate</a></li>
        <li><a href="/atom.xml">RSS</a></li>
        <li><a href="#top">&uarr; Top of the page</a></li>
    </ul>
    <small>
        Built with <a href="https://barf.btxx.org">barf</a>. <br>
        Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br>
        Maintained with ♥ for the web. <br>
        Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> &amp; <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
        The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
    </small>
</footer>