fix: height of multi line breaks

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`.

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": [

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;
 }

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) {