shii.moe

Source for `shii.moe' website.
git clone git://git.knutsen.co/shii.moe
Log | Files | Refs | README | LICENSE

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:
Mshiimoe/templates/layout.html | 10++++++++++
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>