Commit 955c9dc5 authored by alexandre's avatar alexandre

poetic line wrapping

parent 90a38cf5
<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link href="" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
<body lang="fr">
<p>In the late 1970s, Donald Knuth had just received his first samples from the new typesetting system of the publisher of his book, and its quality was so far below that of the first edition of Volume 2 that he couldn't stand it. Around the same time, he saw a new book (Artificial Intelligence, by Patrick Winston) that had been produced digitally, and ultimately realized that typesetting meant arranging 0's and 1's (ink and no ink) in the proper pattern, and said (approximately), <q>As a computer scientist, I really identify with patterns of 0's and 1's; I ought to be able to do something about this. The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly. A programmer is ideally an essayist who works with traditional aesthetic and literary forms as well as mathematical concepts, to communicate the way that an algorithm works and to convince a reader that the results will be correct.</q> So he set out to learn what were the traditional rules for typesetting math, what constituted good typography, and (because the fonts of symbols that he needed really didn't exist) as much as he could about type design.</p>
<script src="main.js"></script>
body {
font-family: 'Gothic A1', sans-serif;
font-size: 32px;
margin: 5em;
p {
max-width: 35em;
margin: 0 auto;
:lang(fr) > q {
quotes: '« ' ' »';
span {
/*outline: 1px solid blue;*/
padding-left: 3em;
function wrapWords(str, tmpl) {
return str.replace(/\w+/g, tmpl || "<tmp>$&</tmp>");
function unwrapWords(str, tmpl) {
return str.replace(/<\/?tmp[^>]*>/g,"");
var elt = document.querySelector("q");
elt.innerHTML = wrapWords(elt.innerHTML);
var lastTop = 0;
var spans = document.getElementsByTagName('tmp');
var l = spans.length;
for (var i=0;i<l;i++) {
var currentTop = spans[i].offsetTop;
if (!lastTop) { lastTop = currentTop; }
else if (currentTop != lastTop) {
spans[i].innerHTML = "<span>«&#8239;</span>" + spans[i].innerHTML
lastTop = currentTop;
elt.innerHTML = unwrapWords(elt.innerHTML);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment