fix: browser compatibility

untunt · untunt · commit ff3c45fe0ca4 · 2021-12-05T15:07:10.000+08:00
Signed-off-by: unt &lt;unt_tianjin@163.com&gt;
diff --git a/kanbun.css b/kanbun.css
@@ -55,6 +55,14 @@
   grid-template-columns: auto 0 0 1em;
 }
 
+.kanbun .has-2-kanji {
+  grid-template-columns: 3em 0 0 1em;
+}
+
+.kanbun .has-3-kanji {
+  grid-template-columns: 5em 0 0 1em;
+}
+
 .kanbun.betagumi .unit {
   grid-template-columns: 0.5em 0.5em auto 1fr;
   margin: 0;
@@ -77,42 +85,44 @@
 .kanbun .kanji {
   grid-row: 2;
   grid-column: 1 / 3;
-  height: 1em;
-}
-
-.kanbun .has-multiple-kanji .kanji {
-  height: max-content;
 }
 
 .kanbun .has-multiple-kanji .unit {
   grid-template-rows: 0 1em 0;
   margin: 0;
 }
 
+.kanbun:not(.betagumi) .has-multiple-kanji .unit {
+  height: 2em;
+}
+
 .kanbun:not(.betagumi) .has-multiple-kanji .unit:last-of-type {
   margin-bottom: -1em;
 }
 
 .kanbun .furigana {
   grid-row: 1;
   grid-column: 1 / 4;
+  white-space: nowrap;
   height: max-content;
   justify-self: center;
+  display: block;
+}
+
+.kanbun.betagumi .has-okurigana.has-less-than-3-furigana .furigana {
+  grid-column: 1;
 }
 
 .kanbun .has-multiple-kanji .furigana {
-  height: -moz-available;
-  height: -webkit-fill-available;
-  height: fill-available;
+  grid-column: 1 / 3;
+  height: auto;
+  justify-self: stretch;
+  text-justify: distribute;
   text-align: justify;
   text-align-last: justify;
 }
 
-.kanbun.betagumi .has-okurigana.has-less-than-3-furigana .furigana {
-  grid-column: 1;
-}
-
-.kanbun.betagumi:not(.furigana-center-align) .furigana {
+.kanbun.betagumi:not(.furigana-center-align) .unit:not(.has-multiple-kanji) .furigana {
   justify-self: start;
 }
 
@@ -124,13 +134,18 @@
 .kanbun.betagumi .has-less-than-3-furigana .okurigana {
   grid-row: 1;
   grid-column: 2 / 5;
+  white-space: nowrap;
   height: max-content;
 }
 
 .kanbun .has-furigana .okurigana {
   grid-column: 4;
 }
 
+.kanbun .has-multiple-kanji .okurigana {
+  grid-column: 3 / 5;
+}
+
 .kanbun.okurigana-sinking .unit:not(.has-furigana) .okurigana,
 .kanbun.okurigana-sinking .saidoku:not(.has-furigana) {
   margin-top: 0.25em;
@@ -158,6 +173,7 @@
 
 .kanbun .kaeriten {
   align-self: end;
+  white-space: nowrap;
   height: max-content;
   z-index: 50;
 }
@@ -174,6 +190,7 @@
 .kanbun .saidoku {
   grid-row: 3;
   grid-column: 1 / 5;
+  white-space: nowrap;
   height: max-content;
 }
 
@@ -207,6 +224,10 @@
   outline: 1px solid #2196f3;
 }
 
+.kanbun.show-borders .unit.has-multiple-kanji > .kanji {
+  outline: 0;
+}
+
 .kanbun .kunten:not(.punctuation) {
   line-height: 0;
 }
diff --git a/kanbun.js b/kanbun.js
@@ -60,6 +60,8 @@ function toHTML(str) {
     // process other brackets
     str = str.replace(/&ldquo;/g, '<ruby class="unit">');
     str = str.replace(/(unit">&lsquo;)/g, 'has-multiple-kanji $1');
+    str = str.replace(/(unit">&lsquo;([^&lfloor;&rsquo;]*&lfloor;){2}[^&lfloor;&rsquo;]*&rsquo;)/g, 'has-2-kanji $1');
+    str = str.replace(/(unit">&lsquo;([^&lfloor;&rsquo;]*&lfloor;){3}[^&lfloor;&rsquo;]*&rsquo;)/g, 'has-3-kanji $1');
     str = str.replace(/(unit">(&lsquo;[^&rsquo;]*&rsquo;)?[^&lsquo;&rdquo;]*\()/g, 'has-furigana $1');
     str = str.replace(/(unit">(&lsquo;[^&rsquo;]*&rsquo;)?[^&lsquo;&rdquo;]*\([^\)][^\)]?\))/g, 'has-less-than-3-furigana $1');
     str = str.replace(/(unit">(&lsquo;[^&rsquo;]*&rsquo;)?[^&lsquo;&rdquo;]*&rdquo;[^&lsquo;&rdquo;]*has-furigana)/g, 'next-unit-has-furigana $1');

-Original file line number
+Diff line change
     // process other brackets
     str = str.replace(/“/g, '<ruby class="unit">');
     str = str.replace(/(unit">‘)/g, 'has-multiple-kanji $1');
 +    str = str.replace(/(unit">‘([^⌊’]*⌊){2}[^⌊’]*’)/g, 'has-2-kanji $1');
 +    str = str.replace(/(unit">‘([^⌊’]*⌊){3}[^⌊’]*’)/g, 'has-3-kanji $1');
     str = str.replace(/(unit">(‘[^’]*’)?[^‘”]*\()/g, 'has-furigana $1');
     str = str.replace(/(unit">(‘[^’]*’)?[^‘”]*\([^\)][^\)]?\))/g, 'has-less-than-3-furigana $1');
     str = str.replace(/(unit">(‘[^’]*’)?[^‘”]*”[^‘”]*has-furigana)/g, 'next-unit-has-furigana $1');