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

This is a better version:
You can see it at:
http://nosetothepage.org/reflowDisplayCode.html
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
>>
>

Received on Sunday, 3 February 2019 22:17:36 UTC