Skip to content

Commit

Permalink
Update C28 to mention rem units (#3956)
Browse files Browse the repository at this point in the history
I feel that adding rem unit examples would mean changing the technique
name, so I instead added a note saying that rem units would have the
same effect.

Closes #3903
  • Loading branch information
fstrr authored Aug 7, 2024
1 parent 3ea579f commit de1b0b7
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions techniques/css/C28.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,13 @@ <h2>When to Use</h2>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in <code class="language-css">em</code> units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings. </p>
<p>The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in <code class="language-css">em</code> units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.</p>
<p>The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.</p>
<p>The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls. </p>
<p>The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.</p>

<div class="note">
<p>This technique uses <code>em</code> units, but using <code>rem</code> units instead would have the same effect.</p>
</div>
</section>
<section id="examples">
<h2>Examples</h2>
Expand All @@ -28,7 +32,7 @@ <h3><code class="language-css">em</code> units for sizes for layout container co

<p>In this example, a <code class="language-html">div</code> element, with <code class="language-html">id</code> value of <code class="language-html">"nav_menu"</code>, is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with <code class="language-html">id</code> value of <code class="language-html">"nav_list"</code>. The text size for the navigation links and the width of the container are specified in <code class="language-css">em</code> units.</p>

<pre xml:space="preserve"><code class="language-css">#nav_menu { width: 20em; height: 100em }
<pre xml:space="preserve"><code class="language-css">#nav_menu { width: 20em; height: 100em; }
#nav_list { font-size: 100%; }</code></pre>
</section>
<section class="example">
Expand Down

0 comments on commit de1b0b7

Please sign in to comment.