feat(dom): multi-width unicode character support by Wybxc · Pull Request #121 · ratatui/ratzilla

Wybxc · 2025-08-18T23:34:01Z

This Pull Request introduces functionality to properly display multi-width Unicode characters (such as Chinese characters and Japanese kana) in DomBackend. It sets the cell following a multi-width Unicode character to display: none, ensuring the correct width is maintained.

Limitations:

This implementation depends on specific fonts that must render CJK characters and Latin letters in an exact 2:1 width ratio. The font used in the example, Maple Mono CN, supports this feature for Chinese characters and Japanese kana but does not maintain the 2:1 ratio for Korean Hangul or emojis. As a result, misalignment may occur when displaying Korean text or emojis.
Occasionally, misalignment may occur after resizing the window. The cause of this issue remains unclear.

junkdog · 2025-09-06T10:15:19Z

neat, i'll take a closer look at it tomorrow.

does not maintain the 2:1 ratio for Korean Hangul or emojis

are you positive these glyphs are actually coming from Maple Mono CN and not a fallback? i've had similar issues when processing fonts - when the requested glyph doesn't exist, it'll look it up in related fonts (and this tends to result in mismatched font metrics).

Wybxc · 2025-09-06T11:50:37Z

are you positive these glyphs are actually coming from Maple Mono CN and not a fallback?

Well, Maple Mono CN does not contain glyphs for Korean Hangul or emojis, which is the real cause of the misalignment. However, it still highlights the issue that users must choose fonts carefully to ensure proper font metrics.

junkdog

thanks for submitting! this is indeed addressing a pretty severe shortcoming in ratzilla.

i left a couple of comments, but overall it looks good!

junkdog · 2025-09-07T17:43:20Z

Cargo.toml

 thiserror = "2.0.12"
 bitvec = { version = "1.0.1", default-features = false, features = ["alloc", "std"] }
 beamterm-renderer = "0.1.1"
+unicode-width = "0.2.0"


there's a 0.2.1 release of unicode-width

junkdog · 2025-09-07T17:56:39Z

examples/unicode/index.html

+    }
+
+    pre {
+      font-family: "Maple Mono NF CN", monospace;


i wasn't sure this would work on my computer, but it looked fine (not sure what it's using though)

junkdog · 2025-09-07T17:57:02Z

examples/unicode/src/main.rs

+                    "你好，世界！",
+                    "世界、こんにちは。",
+                    // "헬로우 월드！",
+                    // "👨💻👋🌐",


why are the emoji disabled?

ah, ofc "As a result, misalignment may occur when displaying Korean text or emojis." - what about enforcing the width as width * 2 for double-width symbols instead of calculating it from metrics - how does it look?

junkdog · 2025-09-07T17:57:31Z

examples/unicode/src/main.rs

+                    // "헬로우 월드！",
+                    // "👨💻👋🌐",
+                ]
+                .join("\n"),


neat and compact :)

junkdog · 2025-09-07T18:00:09Z

src/backend/dom.rs

            let mut line_cells: Vec<Element> = Vec::new();
-            let mut hyperlink: Vec<Cell> = Vec::new();
+            let mut hyperlink: Vec<(Cell, bool)> = Vec::new();
+            let mut skip = 0;


shouldn't skip be a boolean value ? either the next cell renders as usual or it is skipped/hidden.

are there any symbols extending more than double-width - if we stick to terminals?

junkdog · 2025-09-07T18:04:50Z

src/backend/dom.rs

                    }
                } else {
-                    let span = create_span(&self.document, cell)?;
+                    let span = create_span(&self.document, cell, overwritten)?;


maybe it would be clearer to have the old create_span() as-is and add a create_hidden_span(document); it also doesn't require a ref to cell, since it's only used for reading Cell::symbol. what do you think?

junkdog · 2025-09-07T18:08:33Z

src/backend/dom.rs

+            let mut skip = 0;
            for (i, cell) in line.iter().enumerate() {
+                let overwritten = skip > 0;
+                skip = std::cmp::max(skip, cell.symbol().width()).saturating_sub(1);


would it make sense to cache the width of all encountered symbols? cell.symbol().width() looks like it's could be fairly expensive if, for example, scrolling large portions of text at once.

junkdog · 2025-09-07T18:14:06Z

src/backend/dom.rs

    /// accordingly.
    fn update_grid(&mut self) -> Result<(), Error> {
        for (y, line) in self.buffer.iter().enumerate() {
+            let mut skip = 0;


same comment applies here about skip maybe being a boolean

junkdog · 2025-09-07T18:29:09Z

2. Occasionally, misalignment may occur after resizing the window. The cause of this issue remains unclear.

does this behavior only trigger when there are double-width symbols? would be nice if we could get it resolved before merging.

* wip: fix missalignement and glitch with fullwidth char for DOM back see #135 (comment) * fix: multiple width glyph support for DomBackend for now, breaking cursor and resize #135 * feat: get buffer size from utils * fix: fix resize for DomBackend #135 * fix: cursor for DomBackend * feat(examples): add fullwidth glyph in demo2 emails * feat: unicode example from #121 * chore: don't mind hyperlinks - expand unicode example * fix: avoiding vertical flickering * fix: unicode example name and removing external css * fix: removing unecessary cursor attribute * refactor: custom type for css attribute * perf: avoid calling width method for ascii char * fix: prevent OOB access * style: update rustdoc comment * refactor: remove unecessary temp vector * refactor: simplify the update_css_field function * test: update_css_field util function * ops: test targetting wasm32 using wasm-pack * fix build for unicode example * style: style test * ops: install wasm-pack from source * refactor: remove unnecessary import * ops: install wasm-pack with taiki-e install action * style: import to the top, docstrings * build: don't specify a version range for unicode-width * refactor: get cells by reference instead of cloning them

feat(dom): multi-width unicode character support

82121f1

Wybxc mentioned this pull request Aug 19, 2025

feat(canvas): multi-width unicode character support #123

Draft

junkdog requested changes Sep 7, 2025

View reviewed changes

junkdog added feature New feature or request DOM DOM backend related labels Sep 7, 2025

benoitlx mentioned this pull request Nov 26, 2025

refactor(dom): removes double buffering from DomBackend #138

Merged

4 tasks

benoitlx added a commit to benoitlx/ratzilla that referenced this pull request Dec 1, 2025

feat: unicode example from ratatui#121

94af383

Conversation

Wybxc commented Aug 18, 2025

Uh oh!

junkdog commented Sep 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Wybxc commented Sep 6, 2025

Uh oh!

junkdog left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

junkdog commented Sep 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

junkdog commented Sep 6, 2025 •

edited

Loading