Re: Code in Pre should not be a failure at this time.

(W3C hat off, but we have code examples on our pages, so this is quite 
relevant.)

Hi Wayne, hi group,

On 3 Feb 2019, at 23:16, Wayne Dick wrote:

> This is a better version:
> You can see it at:
> http://nosetothepage.org/reflowDisplayCode.html

While this works for the code that is displayed, quite ordinary 
statements, for example in JavaScript might not fit:

```
<div class="code3">
006
<span></span>
var toggles = document.querySelectorAll('.toggle');
</div>
```

There is no natural breaking point in `document.querySelectorAll(`. A 
space or return is a syntax error.

On the other hand, your example sacrifices copy & paste, a functionality 
that helps many people to make code examples more accessible to them.

And for screen readers it adds the line numbers which might be a 
distraction.

I’d love us to find a nice solution for the problem, but we have to 
keep in mind to make it easy for people to implement. `<pre>` is simple 
because it preserves spacing, which can break the code in some 
languages. For example in YAML, using CSS for indentation cannot work 
because the spaces have meaning.

While I think the creator of the content needs to decide how to make the 
code readable, the best advice for now might be to use `word-wrap: 
break-word;` on `<pre>` in small viewports to avoid horizontal scrolling 
at all.

Eric

> Best Wayne
>
> Here is the code:
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="UTF-8">
> <title>Reflow Code</title>
> <style>
> .code1 {display: grid;
> grid-template-columns: 1.8em 1em 1fr}
> .code2 {display: grid;
> grid-template-columns: 1.8em 2em 1fr;}
> .code3 {display: grid;
> grid-template-columns: 1.8em 3em 1fr;}
> @media all and (max-width: 800px) {
> .code1 { grid-template-columns: 1.8em 0.75em 1fr;}
> .code2 {grid-template-columns: 1.8em 1.5em 1fr;}
> .code3 {grid-template-columns: 1.8em 2.25em 1fr;}}
> @media all and (max-width: 450px) {
> .code1 { grid-template-columns: 1.8em 0.5em 1fr;}
> .code2 {grid-template-columns: 1.8em 1em 1fr;}
> .code3 {grid-template-columns: 1.8em 1.5em 1fr;}}
> div {
> margin: 0.4em 0 0.4em 0;
> }
> html {font-size: 150%;}
> </style>
> </head>
> <body>
> <p>This grid example was modified from Eric Meyer <em>Grid Layout in 
> CSS,
> Figure 1.4</em></p>
> <div class = "code1">001<span></span>for (var i =0; i < sLst.length; 
> i++) {
> </div >
> <div class = "code2">002<span></span>str+=sheet(sLst[i]);
> </div ><div class="code2">003<span></span>if (i < sLst.length-1) 
> {</div>
> <div class="code3">004<span></span>// recursive case inserts comma
> separator</div>
> <div class="code3">005<span></span>str+=com;</div>
> <div class="code3">006<span></span>}</div>
> <div class="code2">007<span></span>}</div>
> </body>
> </html>
>
>
> On Sat, Feb 2, 2019 at 2:45 PM Wayne Dick <wayneedick@gmail.com> 
> wrote:
>
>> The following code gives code that word wraps and preserves 
>> indentation up
>> 320 CSS pixels. It really needs media queries for best results but I 
>> left
>> them out for brevity. It is long anyway. This is my ideal of 
>> accessible
>> output.
>>
>> Best, Wayne
>>
>> <!DOCTYPE html>
>> <html lang="en">
>> <head>
>> <meta charset="UTF-8">
>> <title>Reflow Code</title>
>> <style>
>>  .code1 { display: grid;
>>    background: #FCC;
>>    padding: 0;
>>    grid-template-rows: 1fr;
>>    grid-template-columns: 0.25fr 1.75fr 70fr;}
>>  .code2 {display: grid;
>>    background: #FCC;
>>    padding: 0;
>>    grid-template-rows: 1fr;
>>    grid-template-columns: 0.25fr 3.75fr 68fr;}
>>  .code3 { display: grid;
>>    background: #FCC;
>>    padding: 0;
>>    grid-template-rows: 1fr;
>>    grid-template-columns: 0.25fr 5.75fr 66fr;}
>> </style>
>> </head>
>> <body>
>> <p>This grid example was modified from Eric Meyer <em>Grid Layout in 
>> CSS,
>> Figure 1.4</em></p>
>> <p class = "code1">001<span></span>for (var i =0; i < sLst.length; 
>> i++)
>> {str+=sheet(sLst[i]);}
>> </p >
>> <p class="code2">002<span></span>if (i < sLst.length-1) {</p>
>> <p class="code3">003<span></span>// recursive case inserts comma
>> separator</p>
>> <p class="code3">004<span></span>str+=com;</p>
>> <p class="code3">005<span></span>}</p>
>> <p class="code2">006<span></span>}</p>
>> </body>
>> </html>
>>
>> On Sat, Feb 2, 2019 at 2:12 PM Wayne Dick <wayneedick@gmail.com> 
>> wrote:
>>
>>> Hi Patrick,
>>>
>>> I agree about line numbers but it is a small problem. You can pull a 
>>> code
>>> file into almost any word processor. Make the text an ordered list 
>>> and save
>>> it to text. You get a line numbered text file of your code. I just 
>>> did it
>>> in Google Docs.
>>>
>>> Best, Wayne
>>>
>>





--

Eric Eggert
Web Accessibility Specialist
Web Accessibility Initiative (WAI) at World Wide Web Consortium (W3C)

Received on Monday, 4 February 2019 09:45:45 UTC