Safari Reader Mode Code and Math Formatting in iOS 18

Safari’s Reader Mode in iOS 18 improves how technical and academic articles are rendered, streamlining page layouts while maintaining the semantic integrity of complex structures. For developers, students, and researchers, this means standard code blocks and mathematical notation are parsed to match Reader Mode's customizable typography, background themes, and font sizes without sacrificing legibility or essential structural formatting.

Formatting of Code Blocks

In iOS 18, Safari Reader Mode detects standard HTML semantic elements like <pre> and <code> to format programming code cleanly:

  • Monospace Typography: Code is displayed using Apple's system monospace font (SF Mono), cleanly distinguishing code snippets from standard body text.
  • Preservation of Whitespace: Reader Mode respects structural whitespace, indentation, and line breaks defined inside <pre> tags, ensuring code structure remains syntactically correct.
  • Syntax Highlighting Adaptation: Rather than retaining harsh, mismatched external CSS styles, Safari standardizes or softens syntax colors to align with the active Reader theme (Original, White, Paper, Gray, or Night). In high-contrast or dark themes, code text automatically shifts to maintain high legibility against the background.
  • Horizontal Overflow Handling: Long lines of code that exceed screen width are contained within horizontally scrollable containers, preventing layout breakage and unwanted text wrapping that could distort code logic.

Formatting of Mathematical Notation

Safari’s underlying WebKit engine features comprehensive native MathML support, which dictates how math notation is handled in iOS 18 Reader Mode:

  • MathML Preservation: Mathematical expressions marked up using standard MathML elements (such as <math>, <mrow>, <mfrac>, and <msqrt>) are preserved natively. Reader Mode renders fractions, roots, subscripts, superscripts, and matrices accurately in proper spatial arrangements.
  • Dynamic Font Scaling: Equations rendered via MathML dynamically scale alongside Reader Mode's font size controls. When text size is adjusted, formulas resize proportionally with the surrounding paragraph text.
  • Color Adaptation: Math symbols and text automatically adapt their stroke and fill colors to match the user's chosen Reader background, preventing visibility issues such as black text rendering invisibly over dark backgrounds.
  • JavaScript-Rendered Math (KaTeX and MathJax): When websites use libraries like MathJax or KaTeX, Reader Mode attempts to retain the rendered HTML or SVG output. While native MathML offers the most consistent scaling, Safari in iOS 18 reliably passes through SVG-based formulas as inline vector graphics, keeping them sharp across various zoom levels.