Box drawings are misaligned in kata descriptions #3397
Description
Box-drawing characters render misaligned in kata descriptions
Describe the bug
Box-drawing characters (e.g. ─ │ ┌ ┐ └ ┘ ┼) used inside Markdown code blocks (```) render slightly wider than the space character on Codewars.
This causes diagrams made with box-drawing characters to appear misaligned and “broken,” even though they look correct in other Markdown renderers (e.g., VSCode, GitHub, local previewers).
To Reproduce
Steps to reproduce the behavior:
In a kata description or sample markdown, include a simple box-drawing example:
┌───┐
│ │
└───┘
View it on Codewars (any kata description or test preview panel).
The lines will appear misaligned; vertical lines don’t line up with spaces.
Expected behavior
Box-drawing characters should align perfectly in code blocks — same width as spaces and ASCII characters — just like in other monospaced fonts.
Cause (confirmed)
The site’s CSS uses this rule:
.markdown code, .prose code, .prose pre code {
font-family: CamingoCode-Regular, monospace;
}
CamingoCode-Regular does not include Unicode box-drawing glyphs (U+2500–U+257F).
Browsers therefore fall back to a another font for those glyphs, breaking alignment.
Suggested fix
Use a font stack that includes monospaced Unicode coverage for box-drawing characters, such as:
.markdown code, .prose code, .prose pre code {
font-family:
"DejaVu Sans Mono",
"Noto Sans Mono",
"IBM Plex Mono",
"CamingoCode-Regular",
monospace;
}
These fonts render box-drawing symbols with correct width and alignment on all major platforms.
Environment
Browser: Chrome (and others)
OS: macOS (reproducible across platforms)
Codewars: current production site
Screenshots
(Optional: attach before/after images showing the difference if you want)
Additional context
This affects katas using ASCII or Unicode diagrams in their problem descriptions or examples, making them difficult to read.