Skip to content

Commit 15a7ee2

Browse files
vihunavincentdoerig
vihuna
and
vincentdoerig
authored
fix: rework text document justification (#79)
* fix: rework text document justification - All text aligned to left by default - Add `text-justify` CSS class to apply to the `body` element - (doc) Justify the main doc file `index.html`. - (doc) Reformat the code snippet for the first point of "Getting Started" section: code-inline -> code-block - Sidenotes behavior changes: - Right sidenotes explicitly aligned to left by default for `@media (width >= 1050px)` - Left sidenotes explicitly aligned to right by default for `@media (width >= 1050px)` - All sidenotes aligned to left by default for `@media (width <= 1050px)` - All sidenotes justified for `body.text-justify` - Add `break-all` class to allow line breaks between any two characters - Justify the footnotes text (previously left-aligned by default while the main text was justified), when `body.text-justify` is used - (doc) Add `break-all` class to footnotes links to improve word spacing * Add some soft hyphens to improve the justification * docs: tweak wording and fix typo * fix: decrease `text-justify` class specificity --------- Co-authored-by: Vincent Dörig <[email protected]>
1 parent 5297bc9 commit 15a7ee2

3 files changed

Lines changed: 68 additions & 14 deletions

File tree

‎index.html‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<link rel="stylesheet" href="prism/prism.css" />
2121
</head>
2222

23-
<body id="top">
23+
<body id="top" class="text-justify">
2424
<header>
2525
<h1><span class="latex">L<span>a</span>T<span>e</span>X</span>.css</h1>
2626
<p class="author">
@@ -55,16 +55,17 @@ <h2>Contents</h2>
5555
<li>
5656
<a href="#tdpl">Theorems, Definitions and Proofs</a>
5757
<ol>
58-
<li><a href="#proofs-theorems">Proofs & Theorems</a></li>
58+
<li><a href="#proofs-theorems">Proofs & Theo&shy;rems</a></li>
5959
<li><a href="#lemmas">Lemmas</a></li>
6060
<li><a href="#definitions">Definitions</a></li>
6161
</ol>
6262
</li>
6363
<li><a href="#paragraphs">Paragraphs</a></li>
64+
<li><a href="#text-justification">Text Justification</a></li>
6465
<li><a href="#table-classes">Table Classes</a>
6566
<ol>
66-
<li><a href="#table-borders">Custom Table Borders</a></li>
67-
<li><a href="#table-column-aligment">Table Column Alignment</a></li>
67+
<li><a href="#table-borders">Custom Table Bor&shy;ders</a></li>
68+
<li><a href="#table-column-aligment">Table Column Align&shy;ment</a></li>
6869
</ol>
6970
</li>
7071
<li><a href="#auto-hyphenation">Automatic Hyphenation</a></li>
@@ -99,9 +100,8 @@ <h2>Contents</h2>
99100
<h2 id="getting-started">Getting Started</h2>
100101
<ul>
101102
<li>
102-
Add
103-
<code class="language-html">&lt;link rel="stylesheet"
104-
href="https://latex.vercel.app/style.css"&gt;</code>
103+
Add the line
104+
<pre><code class="language-html break-all">&lt;link rel="stylesheet" href="https://latex.vercel.app/style.css"&gt;</code></pre>
105105
to the <code class="language-html">&lt;head&gt;</code> of your website or install the
106106
package using <code>npm install latex.css</code>.
107107
</li>
@@ -145,7 +145,7 @@ <h3 id="author-abstract">Author and Abstract</h3>
145145
&lt;p&gt;...&lt;/p&gt;
146146
&lt;/div&gt;</code></pre>
147147

148-
<h3 id="tdpl">Theorems, Definitions, Lemmas and Proofs</h3>
148+
<h3 id="tdpl">Theorems, Definitions, Lem&shy;mas and Proofs</h3>
149149
<p>
150150
Theorems, definitions, lemmas and proofs are supported. Just wrap your
151151
content in a div and add the corresponding class to the element like
@@ -210,6 +210,25 @@ <h3 id="paragraphs">Paragraphs</h3>
210210
To avoid first line indentation of some specific paragraph, the class <code>no-indent</code>
211211
can be used.</p>
212212
<pre><code class="language-html">&lt;p class="no-indent"&gt;...&lt;/p&gt;</code></pre>
213+
<h3 id="text-justification">Text Justification</h3>
214+
<p>
215+
By default, text content is aligned to the left. If you want to justify the text like in
216+
LaTeX documents, you can use the class <code class="language-css">text-justify</code> on
217+
the <code class="language-html">body</code> element.
218+
</p>
219+
<p>
220+
It is important to consider that elements such as long URLs or long inline code snippets
221+
can lead to irregular word spacing, which in turn degrades readability. It's the
222+
author's responsibility to format problematic elements like switching to a code block,
223+
moving the URLs to a separate line, inserting word break opportunities or modifying the
224+
way the line breaks are inserted.
225+
</p>
226+
<p>
227+
To address the latter of these methods, the class <code class="language-css">break-all</code>
228+
can be used. When applied to an element, the browser is allowed to insert line breaks at any point
229+
between two characters. Keep in mind that this does not preserve whole words, so it is
230+
recommended to use it only when necessary.
231+
</p>
213232
<h3 id="table-classes">Table Classes</h3>
214233
<h4 id="table-borders">Custom Table Borders</h4>
215234
<p>
@@ -644,13 +663,13 @@ <h3 id="syntax-highlighting">Syntax Highlighting</h3>
644663
<div class="footnotes">
645664
<p id="fn1">
646665
1. From
647-
<a
666+
<a class="break-all"
648667
href="https://www.math.brown.edu/~res/MFS/handout8.pdf">https://www.math.brown.edu/~res/MFS/handout8.pdf</a>.
649668
<a href="#ref1" title="Jump back to footnote 1 in the text.">↩</a>
650669
</p>
651670
<p id="fn2">
652671
2. “Definition.” Merriam-Webster.com Dictionary, Merriam-Webster,
653-
<a
672+
<a class="break-all"
654673
href="https://www.merriam-webster.com/dictionary/definition">https://www.merriam-webster.com/dictionary/definition</a>.
655674
Accessed 18 May. 2020.
656675
<a href="#ref2" title="Jump back to footnote 2 in the text.">↩</a>

‎prism/prism.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,10 @@ pre[class*='language-'] {
9292
white-space: normal;
9393
}
9494

95+
:not(pre) > code[class*='language-'].break-all {
96+
word-break: break-all;
97+
}
98+
9599
.token.comment,
96100
.token.prolog,
97101
.token.doctype,

‎style.css‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,10 @@ body.libertinus {
181181
font-family: 'Libertinus', Georgia, Cambria, 'Times New Roman', Times, serif;
182182
}
183183

184+
.text-justify {
185+
text-align: justify;
186+
}
187+
184188
body {
185189
font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
186190
line-height: 1.8;
@@ -204,9 +208,7 @@ body {
204208
-moz-hyphens: auto;
205209
}
206210

207-
/* Justify all paragraphs */
208211
p {
209-
text-align: justify;
210212
margin-top: 1rem;
211213
}
212214

@@ -247,6 +249,15 @@ a:focus {
247249
outline: 2px solid var(--link-focus-outline);
248250
}
249251

252+
/* Allow line breaks between any two characters */
253+
.break-all {
254+
/*
255+
NOTE: Whith `break-all` value no hyphens are shown, even if the word breaks
256+
at a hyphenation point
257+
*/
258+
word-break: break-all;
259+
}
260+
250261
/* Make images easier to work with */
251262
img {
252263
max-width: 100%;
@@ -557,13 +568,23 @@ dl dd {
557568
margin-right: -20vw;
558569
margin-bottom: 1em;
559570
text-indent: 0;
571+
/* Right sidenotes explicitly aligned to left for wide screens */
572+
text-align: left;
560573
}
561574

562575
.sidenote.left {
563576
float: left;
564577
margin-left: -20vw;
565578
margin-bottom: 1em;
566579
text-indent: 0;
580+
/* Left sidenotes explicitly aligned to right for wide screens */
581+
text-align: right;
582+
}
583+
584+
/* Justify all sidenotes for wide screens when `text-justify` class is used */
585+
body.text-justify .sidenote,
586+
body.text-justify .sidenote.left {
587+
text-align: justify;
567588
}
568589

569590
/* (WIP) add border when a sidenote is clicked on */
@@ -634,16 +655,26 @@ input.sidenote-toggle {
634655
clear: both;
635656
width: 95%;
636657
}
658+
659+
/* All sidenotes explicitly aligned to left for narrow screens */
660+
.sidenote-toggle:checked + .sidenote.left {
661+
text-align: left;
662+
}
663+
664+
/* Justify all sidenotes for narrow screens when `text-justify` class is used */
665+
body.text-justify .sidenote-toggle:checked + .sidenote.left {
666+
text-align: justify;
667+
}
668+
637669
/* tweak indentation of sidenote inside a blockquote */
638670
blockquote .sidenote {
639671
margin-right: -25vw;
640672
width: 16vw;
641673
}
642674
}
643675

644-
/* Make footnote text smaller and left align it (looks bad with long URLs) */
676+
/* Make footnote text smaller */
645677
.footnotes p {
646-
text-align: left;
647678
line-height: 1.5;
648679
font-size: 85%;
649680
margin-bottom: 0.4rem;

0 commit comments

Comments
 (0)