Implementing wcwidth support

[mandel59]

The wcswidth^1 function is required to get how many columns are needed to represent the Unicode string. Most of East Asian Characters need two columns rather than one. This asciinema record shows how East Asian Characters break the asciinema player.

Emojis would require two columns to show after Unicode 9.0.^3

[ku1ik]

Thanks for bringing this up. I was aware of this since I created the player. This requires major changes to the internal virtual terminal implementation and so far hasn't been an issue for asciinema users thus it wasn't a high priority task for anyone.

[derhuerst]

I'm having this problem with Emojis. Check cli-minesweeper to try it out in your Terminal.

BTW @sickill thanks for this amazing tool & web service!

[ku1ik]

It may be worth looking at Unicode 9 widths (example impl here: https://github.com/joshuarubin/wcwidth9), which may be a better fit than classic wcwidth()-style calculation.

[jquast]

May I please mention this article that details the varying display of Wide characters across Terminals in depth,

https://jeffquast.com/post/terminal_wcwidth_solution/

Perhaps the asciinema recorder could determine the Terminal's Unicode Version support level in the same way as the https://github.com/jquast/ucs-detect/ CLI tool that I recently published, and include the version in the metadata for the web player to honor, if the player could support selection by multiple versions of Unicode.

[ku1ik]

@jquast thanks for linking to, and writing that blog post! It's going to be super useful when fixing this problem in asciinema player :bow:

[ku1ik]

The recently released 3.7.1 version of the player got several improvements around rendering accuracy, mostly fixing positioning and alignment of various character groups (ascii drawing, block elements, Powerline symbols, CJK, emoji). It now uses unicode-width library which helped quite a lot. It's not a 100% solution but it should look much better than before now.

The minesweeper demo looks perfectly aligned now:

The Asian characters demo is better now, although there's some glitching especially when the cursor moves over the double-width chars:

In summary: we're getting there :sweat_smile:

[ku1ik]

I'm going to close this issue as the support for double-width characters is generally in place. If any other double-width rendering problems occur then please open separate issues for those.