Skip to content

Commit

Permalink
QC1 changes for legibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@meyerweb
meyerweb committed Mar 31, 2023
1 parent 60a7dc0 commit 1b975b7
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 95 deletions.
123 changes: 61 additions & 62 deletions 15-text-properties/hyphens-results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,85 +4,84 @@
<meta charset="utf-8" />
<title>Hyphenation results</title>
<style type="text/css">
div p {border: 1px dashed orange;}
.cl01 {hyphens: auto;}
.cl02 {hyphens: manual;}
.cl03 {hyphens: none;}
.cl01 p {hyphens: auto;}
.cl02 p {hyphens: manual;}
.cl03 p {hyphens: none;}

div {float: left; width: 12em; margin-right: 3em;}
.d01 p {width: 12em;}
.d02 p {width: 10em;}
.d03 p {width: 8em;}
table {border-collapse: collapse;}

div {display: grid;
grid-template-rows: repeat(4, 6em 4.5em);}
div p {height: auto; margin-bottom: auto;}
th, td {vertical-align: top;}
th {font: 115% Open Sans, sans-serif; opacity: 0.666;}

div.labels {width: 10em; margin-right: 1em; padding-right: 1em; border-right: 1px solid rgba(0,0,0,0.25);}
div.labels p {border: 0; text-align: right;}
div.labels p > * {display: block;}
thead th:not(:empty) {inline-size: 13em; border-block-end: 1px solid rgba(0,0,0,0.5); text-align: start;}
thead th:nth-of-type(2) {padding-inline-start: 1em;}
tbody th {inline-size: 11em; padding-block-start: 0.75em; padding-inline-end: 0.5em; border-inline-end: 1px solid rgba(0,0,0,0.25); text-align: end;}
tbody th > * {display: block;}

section {display: grid;
grid-template-columns: repeat(3, 15em);
border-bottom: 1px solid rgba(0,0,0,0.25);
margin-left: 11em; padding-left: 1em;}
tbody tr > * {border-bottom: 1px solid rgba(0,0,0,0.125);}
tbody td:nth-of-type(1) {padding-inline-start: 1em;}
tbody td:nth-of-type(1) p {inline-size: 11em;}
tbody td:nth-of-type(2) p {inline-size: 9em;}
tbody td:nth-of-type(3) p {inline-size: 7em;}

.labels p {font: 90% Open Sans, sans-serif; opacity: 0.666;}
td p {border: 2px dashed orange;}
</style>
</head>
<body>

<section class="labels">
<p><strong>12em wide</strong></p>
<p><strong>10em wide</strong></p>
<p><strong>8em wide</strong></p>
</section>

<div class="labels">
<p>
<table>
<thead>
<tr class="labels">
<th></th>
<th class="d01"><strong>12 em wide</strong></th>
<th class="d02"><strong>10 em wide</strong></th>
<th class="d03"><strong>8 em wide</strong></th>
</tr>
</thead>
<tbody>
<tr>
<th class="labels">
<strong>hyphens: auto</strong>
<em>No soft hyphen entities</em>
</p>
<p>
</th>
<td class="cl01"><p>Supercalifragilisticexpialidocious antidisestablishmentarianism.</p></td>
<td class="cl01"><p>Supercalifragilisticexpialidocious antidisestablishmentarianism.</p></td>
<td class="cl01"><p>Supercalifragilisticexpialidocious antidisestablishmentarianism.</p></td>
</tr>
<tr>
<th class="labels">
<strong>hyphens: manual</strong>
<em>No soft hyphen entities</em>
</p>
<p>
</th>
<td class=cl02"><p>Supercalifragilisticexpialidocious antidisestablishmentarianism.</p></td>
<td class=cl02"><p>Supercalifragilisticexpialidocious antidisestablishmentarianism.</p></td>
<td class=cl02"><p>Supercalifragilisticexpialidocious antidisestablishmentarianism.</p></td>
</tr>
<tr>
<th class="labels">
<strong>hyphens: manual</strong>
<em>Soft hyphen entities</em>
</p>
<p>
</th>
<td class=cl03"><p>Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p></td>
<td class=cl03"><p>Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p></td>
<td class=cl03"><p>Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p></td>
</tr>
<tr>
<th class="labels">
<strong>hyphens: none</strong>
<em>Soft hyphen entities</em>
</p>
</div>

<div class="d01">
<p class="cl01">Supercalifragilisticexpialidocious antidisestablishmentarianism.</p>
<p class="cl02">Supercalifragilisticexpialidocious antidisestablishmentarianism.</p>
<p class="cl02">Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p>
<p class="cl03">Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p>
</div>

<div class="d02">
<p class="cl01">Supercalifragilisticexpialidocious antidisestablishmentarianism.</p>
<p class="cl02">Supercalifragilisticexpialidocious antidisestablishmentarianism.</p>
<p class="cl02">Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p>
<p class="cl03">Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p>
</div>

<div class="d03">
<p class="cl01">Supercalifragilisticexpialidocious antidisestablishmentarianism.</p>
<p class="cl02">Supercalifragilisticexpialidocious antidisestablishmentarianism.</p>
<p class="cl02">Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p>
<p class="cl03">Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p>
</div>
</th>
<td class=cl04"><p>Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p></td>
<td class=cl04"><p>Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p></td>
<td class=cl04"><p>Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious
anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism.</p></td>
</tr>
</table>

</body>
</html>
4 changes: 2 additions & 2 deletions 15-text-properties/text-align-start-end.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<title>Start and end alignment</title>
<link rel="stylesheet" type="text/css" href="ch06.css">
<style type="text/css">
body {display: flex; flex-wrap: wrap; width: auto;}
p {border: 1px dotted gray; margin-left: 2em; width: 400px;}
body {display: flex; flex-wrap: wrap; width: auto; max-width: max-content;}
p {border: 1px dotted gray; margin-left: 2em; width: 320px;}
p[lang] {direction: rtl;}
p[lang="ar"] {font-size: 1.2em; line-height: 1;}

Expand Down
10 changes: 6 additions & 4 deletions 15-text-properties/text-emphasis-various.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@
<title>Various emphasis marks</title>
<link rel="stylesheet" type="text/css" href="ch06.css">
<style type="text/css">
body {width: 92em; font-size: 2rem;}
body {width: 80em; font-size: 1rem;}
table {border-collapse: collapse; border-spacing: 0;}
th, td {border: 1px solid; border-width: 0 1px 1px 0;}
th {padding: 0.5em 1em; font: bold 1em Consolas, monospace;}
th, td {border: 1px solid; border-width: 0 2px 2px 0;}
th {padding: 0.5em; font: bold 1.5em Consolas, monospace;}
tbody td div {display: flex; justify-content: space-between;}
td p {font-size: 1.5em; margin: 0.25em; padding: 0.25em; width: 45%; box-sizing: border-box;}
td p {font-size: 1.5em; margin: 0.25em; padding: 0.25em; width: 50%; box-sizing: border-box;}
td p.v {writing-mode: vertical-rl; max-height: 5em; border-left: 1px dashed gray;}
thead th {vertical-align: bottom; padding-block-start: 0;}
tbody th {padding-inline-start: 0;}

tbody tr.filled td:nth-of-type(1) span {-webkit-text-emphasis-style: sesame; text-emphasis-style: sesame;}
tbody tr.filled td:nth-of-type(2) span {-webkit-text-emphasis-style: dot; text-emphasis-style: dot;}
Expand Down
2 changes: 1 addition & 1 deletion 15-text-properties/white-space-suppressing-line-wrapping.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Suppressing line wrapping with the white-space property</title>
<link rel="stylesheet" type="text/css" href="ch06.css">
<style type="text/css">
body {width: 500px;}
body {width: 40em;}
</style>
</head>
<body>
Expand Down
57 changes: 33 additions & 24 deletions 15-text-properties/word-break-alteration.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,45 @@
<title>Altering word breaking behavior</title>
<link rel="stylesheet" type="text/css" href="ch06.css">
<style type="text/css">
p {border: 1px dotted orange;}
body {width: 47.5em;}

div {float: left; width: 12em; margin-right: 3em;}
.d01 {word-break: normal;}
.d02 {word-break: break-all;}
.d03 {word-break: keep-all;}

.cl02 {direction: rtl;}
table {border-collapse: separate; border-spacing: 3.5em 0; margin-inline-start: -3.5em;}
tbody tr:nth-of-type(2) p {direction: rtl;}
tbody td:nth-of-type(1) p {word-break: normal;}
tbody td:nth-of-type(2) p {word-break: break-all;}
tbody td:nth-of-type(3) p {word-break: keep-all;}
td {vertical-align: top;}

thead code {font: bold 1.33em Consolas, monospace;}
p {border: 2px dashed orange; margin-block: 0.5em 1em; width: 11em;}
</style>
</head>
<body>

<div class="d01">
<p class="cl01">Supercalifragilisticexpialidociously awesome antidisestablishmentarianism.</p>
<p class="cl02">هذا هو سلسلة طويلة غامضة من النص العربي، الذي يتدفق من اليمين إلى اليسار.</p>
<p class="cl03">これは、左から右に流れる漠然と日本語テキストの長い文字列です。</p>
</div>

<div class="d02">
<p class="cl01">Supercalifragilisticexpialidociously awesome antidisestablishmentarianism.</p>
<p class="cl02">هذا هو سلسلة طويلة غامضة من النص العربي، الذي يتدفق من اليمين إلى اليسار.</p>
<p class="cl03">これは、左から右に流れる漠然と日本語テキストの長い文字列です。</p>
</div>

<div class="d03">
<p class="cl01">Supercalifragilisticexpialidociously awesome antidisestablishmentarianism.</p>
<p class="cl02">هذا هو سلسلة طويلة غامضة من النص العربي، الذي يتدفق من اليمين إلى اليسار.</p>
<p class="cl03">これは、左から右に流れる漠然と日本語テキストの長い文字列です。</p>
</div>
<table>
<thead>
<tr>
<th><code>normal</code></th>
<th><code>break-all</code></th>
<th><code>keep-all</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Supercalifragilisticexpialidociously awesome antidisestablishmentarianism.</p></td>
<td><p>Supercalifragilisticexpialidociously awesome antidisestablishmentarianism.</p></td>
<td><p>Supercalifragilisticexpialidociously awesome antidisestablishmentarianism.</p></td>
</tr>
<tr>
<td><p>هذا هو سلسلة طويلة غامضة من النص العربي، الذي يتدفق من اليمين إلى اليسار.</p></td>
<td><p>هذا هو سلسلة طويلة غامضة من النص العربي، الذي يتدفق من اليمين إلى اليسار.</p></td>
<td><p>هذا هو سلسلة طويلة غامضة من النص العربي، الذي يتدفق من اليمين إلى اليسار.</p></td>
</tr>
<tr>
<td><p>これは左から右に流れる漠然と日本語テキストの長い文字列です。</p></td>
<td><p>これは左から右に流れる漠然と日本語テキストの長い文字列です。</p></td>
<td><p>これは左から右に流れる漠然と日本語テキストの長い文字列です。</p></td>
</tr>

</body>
</html>
4 changes: 2 additions & 2 deletions 16-lists-and-generated-content/counter-patterns-extends-fourhex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
range: 1 255; /* stops at FF */
}

ol {margin-left: 3em; padding-left: 0; columns: 2; gap: 2em; font-size: 1.6em;}
ol {margin-left: 2em; padding-left: 0; columns: 2; gap: 2em; font-size: 1.6em;}
ol:nth-child(1) {list-style: hexadecimal;}
ol:nth-child(2) {list-style: hexpad;}
ol:nth-child(3) {list-style: hexcolon;}
ol:nth-child(4) {list-style: hexcolonlimited;}

.arena {display: flex; justify-content: stretch;}
.arena ol {flex-grow: 0;
margin: 0.5em; padding: 0.5em 0 0.5em 3em;
margin: 0.5em; padding: 0.5em 0 0.5em 1em;
border-right: 2px solid;}
.arena ol:last-child {border-right: none;}
ol, li {max-width: max-content;}
Expand Down

0 comments on commit 1b975b7

Please sign in to comment.