You’ve poured your heart into your manuscript. After AI-assisted conversion, you open your ePub on a phone and—the text overflows, images are cut off, and the layout is a chaotic mess. This isn't just an aesthetic failure; it’s a reader-repellent. The core principle for avoiding this is mobile-first, semantic HTML with proportional CSS.
This means building your ebook’s structure on a foundation of meaningful HTML tags (like <section>, <article>) and styling with relative units (rem, em) instead of fixed ones (pt, px). AI conversion tools can automate this, but you must validate the output. A tool like Reedsy Studio’s built-in preview is invaluable for instantly testing how your reflowable text adapts to different screen sizes during the formatting phase.
Mini-scenario: Your chapter heading has margin-left: 50px. On a small e-ink screen, that large fixed margin pushes the text awkwardly, wasting precious space. The fix is margin-left: 2em, which scales gracefully with the reader’s chosen font size, preserving hierarchy without breaking the layout.
Here’s how to implement this principle:
- Structure with Semantics: Ensure your source document uses Heading 1-3 styles exclusively for titles and subheadings. AI converters should transform these into a logical HTML outline. Validate that the generated NCX/nav document matches this structure exactly by clicking every link in the TOC.
- Style with Proportions: Apply a CSS reset that normalizes margins and uses
remunits for font sizes and spacing. Wrap all images in<figure>tags with<figcaption>and enforcemax-width: 100%. Crucially, avoid manual tabs, spaces for indentation, or text boxes, and ensure any drop caps use the::first-letterpseudo-element correctly to prevent indentation glitches. - Validate Across Real Devices: Testing on your computer isn’t enough. Open it in Apple Books on an iPhone/iPad, send the final
.epubto your own Kindle, and if possible, check a Kobo or Nook app. Test all internal links ("See Chapter 5"), endnotes, and the "Back" button functionality. Remember: many reading systems strip background colors, so never rely on them for key information.
The goal is a beautiful, readable experience regardless of font size changes, font family swaps, or screen rotation. By enforcing semantic structure and proportional CSS, you let the reflowable nature of ePub3 shine, ensuring your content is accessible and professional on every device, every time. This is the non-negotiable standard for a polished, market-ready ebook.
Top comments (0)