Adaptive reading mode

From printed page
to phone screen

Adaptive reading mode turns a printed article into a single column that fits the reader’s screen. Here’s how we preserve your text, pictures and typefaces along the way.

Request a demo

Follow one article
from page to screen

Compare a three-page Foreign Policy article with its reading-mode layout. Change the text size or column width to see how it adapts.

Print page 7. — A three-page Foreign Policy article, with its original type and photograph extracted from the PDF. The browser and iOS app use the same layout engine.

Print page 8. — A three-page Foreign Policy article, with its original type and photograph extracted from the PDF. The browser and iOS app use the same layout engine.

How a page becomes
a reading layout

A PDF tells us where everything sits on the page. To adapt an article for the screen, we need to know which pieces belong together, what order they go in and how they should be laid out.

On the server, before publication

On the reader’s device

01Extract
Extract letter shapes, images and their positions from the PDF.
02Structure
Identify the content that belongs to each article.
03Design
Prepare a layout plan for a single reading column.
04Render
Fit the plan to the screen width and text size.

Automated checks verify the content and layout before publication. An article that does not pass remains available on its original page.

01 · Extract

Keep the details
that make it yours

The headline typeface, caption size and opening drop cap all give your publication its character. We preserve those details as well as the words.

We extract letter shapes, dimensions, colours and positions, along with photographs, rules and any structural information in the PDF. Next, we identify the headlines, match images to articles and work out how the pieces fit together.

The opening of Foreign Policy’s article: headline, rule, byline, vertical photo credit and a large drop cap. — The opening of the article on printed page 7. Extraction also preserves the thin rule, vertical photo credit and original hyphenation.

02 · Structure

Find the thread
across pages and columns

The Foreign Policy article spans three pages. We follow its text from column to column, separating it from neighbouring stories to create one continuous article.

We start with the structural information in the source. Where that’s missing, we use typefaces, text sizes, positions and rules to identify the article’s parts and their reading order.

Print page 7, showing the reading order. — The line follows 28 blocks across three pages. At this stage the photograph still comes first, as in print. The design stage decides where it belongs in reading mode.

Print page 8, showing the reading order. — The line follows 28 blocks across three pages. At this stage the photograph still comes first, as in print. The design stage decides where it belongs in reading mode.

Your editorial system can provide the structure

Foreign Policy’s InDesign PDFs supplied almost all the structure needed for this article. Where a PDF lacks that information, an XML export from your editorial system can fill the gaps. Information supplied by the source takes priority over our inferences from typography and position. The conversion doesn’t use a language model.

We always take the text and images from the final PDF. An editorial export may contain earlier wording or material that was cut before publication. Using the PDF ensures that reading mode matches the published version, word for word.

03 · Design

A layout made
for reading on screen

We create a layout plan that sets the order of the article’s elements, places images and captions, and defines the spacing around them.

The plan keeps your publication’s typography while adapting the layout for the screen. The reader’s device sets the final column width and line breaks.

The photograph fills the phone screen, with the headline out of view below it. — The same article on a phone held in landscape orientation. Both views use the actual layout engine; only the image’s position changes.

The headline and byline appear first, followed by the top of the photograph. — The same article on a phone held in landscape orientation. Both views use the actual layout engine; only the image’s position changes.

Explore the layout decisions

Every block in the plan has a record of the rules used to lay it out. Select one below to see what stays as it was in print and what changes for reading mode. These records help us refine layouts too.

Print page 7, with article blocks marked. — These decisions come from the article’s actual layout plan. Default decisions are shown in a lighter tone.

Print page 8, with article blocks marked. — These decisions come from the article’s actual layout plan. Default decisions are shown in a lighter tone.

Headlines keep their proportions: The headline’s size relative to the body text comes from print. On narrow screens, we reduce large headlines slightly to avoid lines with only a few letters.
Spacing follows the printed page: Spacing is based on measurements from the original pages and scales with the text size.
Colour is part of the typography: We keep the original text colours, adjusting them when needed for legibility. For example, a white caption moved from a photograph to a light background takes the body text colour.

Validate

Check every word.
Check the layout

Automated checks compare the article with its source and verify the layout dimensions.

The checks use the same layout engine as the reader’s device. If an article fails, readers can still read it on the original page, but it won’t be offered in reading mode.

Every word accounted for: The checks verify that every word is present exactly once and in the original reading order.
A layout that fits: Images must be present, lines must fit the column and elements must not overlap.
Visual review during development: We also review layouts against the printed pages by eye, then use what we learn to improve the rules for future articles.

This example passed: all 28 blocks and every word accounted for.

04 · Render

The final layout happens
on the reader’s screen

When the reader opens an article, its structure and layout plan are already prepared. The device calculates line breaks, adjusts word spacing and draws the article to fit the available width.

It uses the same letter shapes extracted from the PDF, preserving the typefaces and spacing within words. If the reader changes the text size or rotates the device, it recalculates the lines using the same plan.

Type extracted from the article: the large D drop cap, body letters and italics, headline letters, numbers and caption type. — Letter shapes extracted from the article’s PDF, shown at their original relative sizes. The large D opens the article in reading mode too.

One layout engine, from checks to reading

The server’s checks, the browser and the iOS app use the same layout engine. This lets us develop and check line breaks and layout dimensions in one place.

From printed pageto phone screen

Follow one articlefrom page to screen

How a page becomesa reading layout

Keep the detailsthat make it yours

Find the threadacross pages and columns

Your editorial system can provide the structure

A layout madefor reading on screen

Let readers see the headline first

Explore the layout decisions

Headline

Byline

Image, caption and credit

Body text, paragraph 1/23

Body text, paragraph 2/23

Body text, paragraph 3/23

Body text, paragraph 4/23

Body text, paragraph 5/23

Body text, paragraph 6/23

Body text, paragraph 7/23

Body text, paragraph 8/23

Body text, paragraph 9/23

Body text, paragraph 10/23

Body text, paragraph 11/23

Body text, paragraph 12/23

Body text, paragraph 13/23

Body text, paragraph 14/23

Body text, paragraph 15/23

Body text, paragraph 16/23

Body text, paragraph 17/23

Body text, paragraph 18/23

Body text, paragraph 19/23

Body text, paragraph 20/23

Body text, paragraph 21/23

Body text, paragraph 22/23

Body text, paragraph 23/23

Info box