Skip to content

Wrong spacing in thumbnail/embed SVG with Consolas font #265

@lionel-rowe

Description

@lionel-rowe

Edit: I realized this issue is in the wrong repo, feel free to move to asciinema/asciinema-server. PR at asciinema/asciinema-server#450


Describe the bug

With this recording: https://asciinema.org/a/XxTbS0aAtTA6BZ9tdzKardxJs

The recording itself (including the freeze frame of the frame used for the thumbnail) looks perfect, stunning, gorgeous.

However, the spacing is off in the SVG used for the thumbnail/embed image when displayed on Windows 11 with the Consolas font installed (from examining the SVG, the font stack is "Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols'").

Changing the font to Courier New fixes the problem (but it also makes it kinda ugly cuz... Courier New). Changing the font size to 15.3px (magic number) also seems to fix it, but presumably would break the other fonts.

Screenshots:

Description Screenshot
Freeze frame of the recording itself Screenshot of a freeze frame of the recording itself
SVG with Consolas font installed (broken spacing) Screenshot of SVG with Consolas font installed
SVG with the font manually changed to Courier New (fixed but ugly) Screenshot of SVG with font changed to Courier New
SVG with the font size manually changed to 15.3px (fixed but magic number) Screenshot of SVG with font changed to Courier New

Direct link to the SVG

To Reproduce
Steps to reproduce the behavior:

  1. Create a recording containing various ANSI code spans of different colors/font weight/etc
  2. View the thumbnail with the Consolas font installed

There are prominent examples at https://asciinema.org/explore that also reproduce the problem, e.g. https://asciinema.org/a/666780

Expected behavior

Thumbnail to look identical (or near-identical) to screenshotted freeze frame, just crisper due to being an SVG.

Versions:

  • OS: WSL with Ubuntu 22.04.4 LTS
  • asciinema cli: asciinema 2.1.0

Additional context
N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions