Revert removal of text balancer

Author: Keavon

website/content/_index.md

@@ -3,9 +3,9 @@ title = "Free online vector editor & procedural design tool"
 template = "section.html"
 
 [extra]
-css = ["/page/index.css", "/component/carousel.css", "/component/feature-icons.css", "/component/feature-box.css", "/component/youtube-embed.css"]
+css = ["/page/index.css", "/component/carousel.css", "/component/feature-icons.css", "/component/feature-box.css", "/component/youtube-embed.css", "/layout/balance-text.css"]
 js = ["/js/carousel.js", "/js/youtube-embed.js", "/js/video-autoplay.js"]
-linked_js = []
+linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
 meta_description = "Open source free software. A vector graphics creativity suite with a clean, intuitive interface. Opens instantly (no signup) and runs locally in a browser. Exports SVG, PNG, JPG."
 +++
 

website/sass/base.scss

@@ -407,10 +407,6 @@ article {
 	min-height: 0;
 }
 
-.balance-text {
-	text-wrap: balance;
-}
-
 // ==================================
 // HEADER AND TEXT ELEMENT TAG STYLES
 // ==================================

website/sass/layout/balance-text.scss

@@ -0,0 +1,22 @@
+// CSS component of the JS text balancer script.
+// This must be loaded as an inline stylesheet in the head of the
+// document to avoid the possibility of a visible layout shift.
+
+.balance-text {
+	visibility: hidden;
+}
+
+@media (scripting: none) {
+	.balance-text {
+		visibility: visible !important;
+	}
+}
+
+@supports (text-wrap: balance) {
+	.balance-text,
+	.balanced-text {
+		text-align: left;
+		text-wrap: balance;
+		visibility: visible;
+	}
+}