[BUG] Misaligned box boundaries in SVG generated from a rich-click help dialogue

I’m using the new save_svg method to write a SVG of a help dialogue generated with @ewels’ rich-click. However, the │ characters of the right side of the box are misaligned.

Apparently these additional whitespaces are being caused my markup. For example, the DESTINATION in the dialogue is [u]DESTINATION[/u]. But this seems to be another issue, since it doesn’t happen when I keep the default Fira Code font.

Python 3.8.12
rich 12.4.1
macOS 12.3.1

[apcamargo]

@ewels Very dirty code:

def _get_rich_console() -> Console:
    console = Console(
        record=True, # <- I added this parameter
        theme=Theme(
            {
                "option": STYLE_OPTION,
                "switch": STYLE_SWITCH,
                "metavar": STYLE_METAVAR,
                "metavar_sep": STYLE_METAVAR_SEPARATOR,
                "usage": STYLE_USAGE,
            }
        ),
        highlighter=highlighter,
        color_system=COLOR_SYSTEM,
    )

…

    # Epilogue if we have it
    if obj.epilog:
        # Remove single linebreaks, replace double with single
        lines = obj.epilog.split("\n\n")
        epilogue = "\n".join([x.replace("\n", " ").strip() for x in lines])
        console.print(Padding(Align(highlighter(epilogue), width=MAX_WIDTH, pad=False), 1))

    # Footer text if we have it
    if FOOTER_TEXT:
        console.print(Padding(_make_rich_rext(FOOTER_TEXT, STYLE_FOOTER_TEXT), (1, 1, 0, 1)))

    from rich.terminal_theme import DIMMED_MONOKAI
    
    # Save the SVG within `rich_format_help`
    console.save_svg(
        "/Users/APCamargo-M55/Documents/genomad/help_dialog.svg",
        title="genomad",
        theme=DIMMED_MONOKAI,
        code_format=CONSOLE_SVG_FORMAT,
        )

[github-actions[bot]]

Did I solve your problem?

Why not buy the devs a coffee to say thanks?