Why Does ASCII Art Break on Mobile Devices?

Creating ASCII art for a personal portfolio is a classic developer rite of passage. However, rendering it consistently across devices can be surprisingly tricky. If your ASCII art looks perfect on desktop but appears warped, compressed, or misaligned on mobile browsers like Chrome for Android, you are not alone.

This layout distortion typically happens due to three main culprits: mobile font boosting, inconsistent space characters, or fallback font rendering issues. Here is how to fix them step-by-step.

Solution 1: Disable Mobile Font Boosting (Text Inflation)

Mobile browsers (especially WebKit and Blink-based browsers like Chrome on Android) use an automatic accessibility feature called "Font Boosting" or "Text Inflation". To make body text easier to read on small screens, the browser automatically scales up certain text blocks. While helpful for articles, this completely breaks the strict grid layout of monospaced fonts.

To disable this behavior and keep your ASCII art intact, add the text-size-adjust property to your CSS:

.asciiArt {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

Setting this to 100% forces the mobile browser to render the font at its exact defined size, preserving your ASCII alignment.

Solution 2: Sanitize Your Space Characters

When generating ASCII art online, generators often mix different types of space characters to bypass HTML rendering quirks. In your raw HTML, you might have a mix of:

  • Standard spaces (U+0020)
  • Non-breaking spaces (U+00A0 or  )
  • Braille blanks (U+2800)

On mobile operating systems, the fallback fonts for these special characters may not have the exact same width as a standard space in your chosen monospaced font. To fix this, inspect your ASCII art and replace all invisible characters with standard spaces. Ensure your HTML container uses white-space: pre; so that consecutive spaces are not collapsed by the browser:

.asciiArt {
    white-space: pre;
    font-family: 'JetBrains Mono', monospace;
}

Solution 3: Prevent Fallback Font Misalignments

If your custom font (like JetBrains Mono) takes a moment to load on mobile, the browser will render the ASCII art using a system fallback font (like Roboto Mono or Droid Sans Mono). If the fallback font has slightly different character-to-space ratios, your art will warp during the layout shift.

To prevent this, use display=block in your Google Fonts import to tell the browser to block text rendering until the custom monospaced font is fully loaded:

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=block');

Summary

To ensure your ASCII art remains perfectly aligned across all desktop and mobile browsers, always disable mobile font boosting with text-size-adjust: 100%, use uniform standard spaces, and ensure your monospaced font is loaded correctly before rendering.