Skip to content

Tweak inline code and preformatted blocks #4683

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

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+36 −24
Open

Tweak inline code and preformatted blocks #4683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
24df714
Tweak inline code and preformatted blocks
patrickhlauke Oct 10, 2025
54fb1a9
Moves the proposed styles to the right place
patrickhlauke Oct 10, 2025
c2bf5a2
Restore trailing newline in base.css
kfranqueiro Oct 10, 2025
70c4816
Fix multiple `code`s in the same `pre`
patrickhlauke Oct 14, 2025
9986338
Make border around `pre` more subtle / in line with similar borders
patrickhlauke Oct 14, 2025
781f9d3
Merge branch 'main' into patrickhlauke-styles-code
patrickhlauke Oct 17, 2025
25d6546
Fix elusive cases of multiple `code`s in the same `pre`
kfranqueiro Oct 17, 2025
3a0a68a
Merge branch 'main' into patrickhlauke-styles-code
patrickhlauke Oct 17, 2025
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
17 changes: 17 additions & 0 deletions css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,3 +491,20 @@ figcaption {
margin: 1em 0 0 0;
}
}

/* preformatted blocks - generally contain code element */

pre {
padding: 1em;
border: 1px solid var(--line-grey);
background-color: var(--pure-white);
}

/* inline code not in a preformatted block or link */

:not(:is(pre, a)) > code {
font-size: 0.85em;
background: #ebebeb;
padding: 0 0.25em;
display: inline-block;
}
6 changes: 3 additions & 3 deletions techniques/aria/ARIA19.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h3>Injecting error messages into a container with role=alert already present in
</p>
<p>jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
</p>
<pre xml:space="preserve"><code class="language-javascript">$(document).ready(function(e) {
<pre><code class="language-javascript">$(document).ready(function(e) {
$('#signup').submit(function() {
$('#errors').html('');
if ($('#first').val() === '') {
Expand All @@ -28,8 +28,8 @@ <h3>Injecting error messages into a container with role=alert already present in
}
return false;
});
});</code>
<code class="language-html">&lt;form name="signup" id="signup"&gt;
});</code></pre>
<pre><code class="language-html">&lt;form name="signup" id="signup"&gt;
&lt;p id="errors" role="alert" aria-atomic="true"&gt;&lt;/p&gt;
&lt;div&gt;
&lt;label for="first"&gt;First Name (required)&lt;/label&gt;&lt;br&gt;
Expand Down
9 changes: 4 additions & 5 deletions techniques/failures/F2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,16 @@ <h3>Using CSS to style the <code>p</code> element to look like a heading</h3>

<p>The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assistive Technology could not distinguish it as a heading.</p>

<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
<pre><code class="language-html">&lt;style&gt;
.heading1{
font-family: Times, serif;
font-size:200%;
font-weight:bold;
}
&lt;/style&gt;
</code>
<code class="language-html">&lt;p class="heading1"&gt;Introduction&lt;/p&gt;
&lt;p&gt;This introduction provides detailed information about how to use this ...&lt;/p&gt;</code>
</pre>
</code></pre>
<pre><code class="language-html">&lt;p class="heading1"&gt;Introduction&lt;/p&gt;
&lt;p&gt;This introduction provides detailed information about how to use this ...&lt;/p&gt;</code></pre>

<div class="note">
<p>In this case, the proper approach would be to use CSS to style the <code>H1</code> element in HTML.</p>
Expand Down
7 changes: 3 additions & 4 deletions techniques/failures/F37.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,13 @@ <h3></h3>
the form when a radio button is selected instead of using a submit
button. </p>

<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
<pre><code class="language-html">&lt;script&gt;
function goToMirror(theInput) {
var mirrorSite = "https://download." + theInput.value + "/";
window.open(mirrorSite);
}
&lt;/script&gt;</code>
...
<code class="language-html">&lt;form name="mirror_form" id="mirror_form" action="" method="get"&gt;
&lt;/script&gt;</code></pre>
<pre><code class="language-html">&lt;form name="mirror_form" id="mirror_form" action="" method="get"&gt;
&lt;p&gt;Please select a mirror download site:&lt;/p&gt;
&lt;p&gt;
&lt;input type="radio" onclick="goToMirror(this);" name="mirror"
Expand Down
5 changes: 2 additions & 3 deletions techniques/failures/F50.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@

// kick it off
show();
&lt;/script&gt;</code>
...
<code class="language-html">&lt;span id="blink1"&gt;This content will blink&lt;/span&gt;</code></pre>
&lt;/script&gt;</code></pre>
<pre><code class="language-html">&lt;span id="blink1"&gt;This content will blink&lt;/span&gt;</code></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
Expand Down
9 changes: 4 additions & 5 deletions techniques/failures/F88.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<p>In the following example of a failure, the HTML <code>align</code> attribute is used to create justified text.</p>

<pre xml:space="preserve"><code class="language-html">&lt;p align="justify"&gt;
<pre><code class="language-html">&lt;p align="justify"&gt;
Peter Piper picked a peck of pickled peppers
A peck of pickled peppers Peter Piper picked
If Peter Piper picked a peck of pickled peppers
Expand All @@ -18,13 +18,12 @@

<p>In this example of a failure, the CSS text-align property is used to create justified text.</p>

<pre xml:space="preserve"><code class="language-css">p {text-align: justify}</code>
<code class="language-html">&lt;p&gt;
<pre><code class="language-css">p {text-align: justify}</code></pre>
<pre><code class="language-html">&lt;p&gt;
How much wood would a woodchuck chuck if a woodchuck could chuck wood?
He would chuck, he would, as much as he could, and chuck as much wood
As a woodchuck would if a woodchuck could chuck wood.
&lt;/p&gt;</code>
</pre>
&lt;/p&gt;</code></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
Expand Down
7 changes: 3 additions & 4 deletions techniques/failures/F94.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,11 @@ <h2>Examples</h2>
<section class="example">
<h3>Failure example 1</h3>
<p>The following CSS and HTML snippet uses VW units to size the text.</p>
<pre xml:space="preserve"><code class="language-css">/* CSS */
<pre><code class="language-css">/* CSS */
.callout {
font-size:1vw;
}</code>

<code class="language-html">&lt;p class="callout"&gt;Text that scales by viewport units&lt;/p&gt;</code></pre>
}</code></pre>
<pre><code class="language-html">&lt;p class="callout"&gt;Text that scales by viewport units&lt;/p&gt;</code></pre>
<p class="working-example">Example <a href="../../working-examples/failure-viewport-units/">page with an example of text sized in <code>vh</code> units</a>.</p>
</section>
</section>
Expand Down