From 2c105aa664cd135bdd1fca3e5ec42ac7772096dc Mon Sep 17 00:00:00 2001
From: weizhenye <weizhenye@gmail.com>
Date: Tue, 3 Sep 2024 00:50:29 +0800
Subject: [PATCH] fix: height of multi line breaks

---
 README.md           | 10 +---------
 package.json        |  2 +-
 src/global.css      |  4 ++++
 src/renderer/dom.js |  7 +++++--
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index d07ecfb..b829576 100644
--- a/README.md
+++ b/README.md
@@ -13,9 +13,7 @@
 <a href="https://github.com/weizhenye/ass-compiler">ass-compiler</a>
 <span>・</span>
 
-ASS.js renders ASS subtitles on HTML5 video, with almost full ASS features.
-
-(Karaoke tags `\k`, `\kf`, `\ko`, `\kt`, `\K` are still WIP.)
+ASS.js renders ASS subtitles on HTML5 video, with [almost full ASS features](https://github.com/weizhenye/ASS/wiki/Differences-with-Specs).
 
 It's lightweight and suitable for web, **60x** smaller than WebAssembly solutions:
 | | Solution | Size |
@@ -152,9 +150,3 @@ ASS.js uses many Web APIs to render subtitles, some features will be disabled if
 | `\q0` | [text-wrap: balance](https://caniuse.com/css-text-wrap-balance) | 114 | 121 | 17.5 |
 | BorderStyle=3 with `\bord0` | [@container](https://caniuse.com/mdn-css_at-rules_container_style_queries_for_custom_properties) | 111 | - | 18.0 |
 | `\blur` with `\bord0` | [sign()](https://caniuse.com/mdn-css_types_sign) | - | 118 | 15.4 |
-
-## Known issues
-
-* `\N` in Aegisub has less height than `<br>` in browsers, subbers should avoid to use multiple `\N` to position a dialogue, use `\pos` instead.
-* `\be` is just treated as `\blur`.
-* `\q3` is just treated as `\q0`.
diff --git a/package.json b/package.json
index 27075ca..ba693d9 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "assjs",
   "version": "0.1.2",
   "type": "module",
-  "description": "A JavaScript ASS subtitle format renderer",
+  "description": "A lightweight JavaScript ASS subtitle renderer",
   "main": "dist/ass.js",
   "types": "dist/ass.d.ts",
   "files": [
diff --git a/src/global.css b/src/global.css
index 8f330a4..fe5c1cd 100644
--- a/src/global.css
+++ b/src/global.css
@@ -21,8 +21,12 @@
   line-height: calc(var(--ass-scale) * var(--ass-tag-fs) * 1px);
   letter-spacing: calc(var(--ass-scale) * var(--ass-tag-fsp) * 1px);
 }
+.ASS-dialogue [data-is="br"] + [data-is="br"] {
+  height: calc(var(--ass-scale) * var(--ass-tag-fs) * 1px / 2);
+}
 .ASS-dialogue[data-wrap-style="0"],
 .ASS-dialogue[data-wrap-style="3"] {
+  /* \q3 is just treated the same as \q0 in libass */
   text-wrap: balance;
   white-space: pre-wrap;
 }
diff --git a/src/renderer/dom.js b/src/renderer/dom.js
index 562c383..a33e336 100644
--- a/src/renderer/dom.js
+++ b/src/renderer/dom.js
@@ -53,7 +53,7 @@ export function createDialogue(dialogue, store) {
       const hasScale = scaleTags.some((x) => tags.some((t) => t[x] !== undefined && t[x] !== 100));
       const hasSkew = skewTags.some((x) => tags.some((t) => t[x]));
 
-      encodeText(text, tag.q).split('\n').forEach((content, idx) => {
+      encodeText(text, dialogue.q).split('\n').forEach((content, idx) => {
         const $span = document.createElement('span');
         const $ssspan = document.createElement('span');
         if (hasScale || hasSkew) {
@@ -76,7 +76,10 @@ export function createDialogue(dialogue, store) {
           $span.append(obj.$svg);
         } else {
           if (idx) {
-            df.append(document.createElement('br'));
+            const br = document.createElement('div');
+            br.dataset.is = 'br';
+            br.style.setProperty('--ass-tag-fs', tag.fs);
+            df.append(br);
           }
           if (!content) return;
           if (hasScale || hasSkew) {