commit 93cc494b84510e02b084b6270cb1e7f459971142
parent 0be720c57d89ac203804720848d4c5a4d201c99f
Author: Demonstrandum <samuel@knutsen.co>
Date: Mon, 15 Aug 2022 21:20:18 +0100
Add Knuth-Plass TeX-style text justification.
The standard browser `text-align: justify;` is trash.
It leaves huge spaces and gaps, makes it hard to read.
[tex-linebreak2](https://github.com/egilll/tex-linebreak2) is a
JavaScript text justification library that intelligently spaces
and breaks words according to the Knuth-Plass algorithm used in TeX.
Diffstat:
1 file changed, 10 insertions(+), 0 deletions(-)
diff --git a/shiimoe/templates/layout.html b/shiimoe/templates/layout.html
@@ -22,6 +22,7 @@
<link rel="icon" type="image/png" href="/mascots/{{ mascot }}-square.png">
<link rel="preload" as="image" href="/background-300x300.png">
<title>{% block title %}{% endblock %} – Shiimoe!!</title>
+ <script src="https://unpkg.com/tex-linebreak2@latest/dist/lib_web.js"></script>
{% endblock %}
</head>
<body>
@@ -41,11 +42,20 @@
{% endblock %}
</div>
{% block scripts %}
+ <!-- Mascot -->
<noscript><style>#mascot { opacity: 0.85; }</style></noscript>
<img src="/mascots/{{ mascot }}.png" id="mascot"></img>
<script src="/colours.js"></script>
<script src="/image.js"></script>
<script>randomMascot(NOVELTY);</script>
+ <!-- Competent text alignment -->
+ <script>
+ // Only immediate children paragraphs of article tag are considered content.
+ const paragraphs = document.querySelectorAll("article > p");
+ texLinebreak_lib_web.texLinebreakDOM(paragraphs, {
+ align: 'justify'
+ });
+ </script>
{% endblock %}
</body>
</html>
