Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update C28 to mention rem units #3956

Merged
merged 1 commit into from
Aug 7, 2024
Merged

Update C28 to mention rem units #3956

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions techniques/css/C28.html
View file
Open in desktop
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