I am seeking a solution to manage the visual width of double-width unicode characters like the LARGE ORANGE SQUARE đ§ within Github-flavored Markdown. I am open to using either Markdown code or Html/CSS for this purpose.
An illustration of the issue can be seen in the following Markdown code snippet, which fails to display correctly on Brave browser running on MacOS (Chromium 105, MacOS 12.6 as of 2022-09-27):
1 3 5 7 9
single width reference â â â â â
double width unicode đȘđ«đ©đȘđ«đ©đȘđ«đ©
double width reference â â â â â â â â â
1 2 3 4 5 6 7 8 9
The double-width characters appear misaligned within the monospaced grid, making them unsuitable for use in box drawing or game rendering within this context.
While these characters render correctly in system terminals like iTerm2 or the VSCode terminal, they encounter issues when viewed in web browsers, suggesting a Markdown/CSS/Html discrepancy likely related to website fonts and browser settings.
Inquiries:
- How can I exert precise control over the width of double-width Unicode strings within Markdown code sections?
- Are there alternative methods to ensure proper rendering, particularly on platforms like Github?