Reading Mode
Break has two ways to lay out a page. In Columns the sections of a page stand side by side and the page moves from left to right. In Scroll the same sections stack and the page moves down, like any other website.
Columns is the default. Readers can switch to Scroll for themselves, and you can turn Columns off for everyone.
Where Columns Applies#
The sideways layout needs room. A page reads sideways only when all of these are true:
- the browser window is at least 992 pixels wide
- the window is wider than it is tall (landscape)
- the window is at least 600 pixels tall
- the reading mode is Columns
Everywhere else the sections stack. That covers phones, tablets held upright, short windows and every reader who chose Scroll.
| Page | Reading mode |
|---|---|
| The front page | Follows the reader's choice |
Archives: /blog/, tag and author pages, /projects/, /issues/ | Follows the reader's choice |
Pages the theme builds by slug, such as live, video, podcast, markets and archive | Follows the reader's choice |
| Posts | Always Scroll |
| Ordinary pages | Always Scroll |
Posts and ordinary pages are always read top to bottom, whatever the reader picked. On those pages the reading mode row in the settings panel shows Scroll and cannot be changed.
Moving Through a Sideways Page#
On a sideways page the mouse wheel moves the page left and right. Trackpad swipes and the left and right arrow keys work as usual. Page Down and Space jump to the next section, Page Up and Shift + Space to the previous one. Home and End go to the start and the end of the page.
Some sections hold a list that is taller than the window, such as the wire. The wheel scrolls that list first and moves the page on once the list reaches its end.
The Bottom Bar#
A bar along the bottom of the window shows where the reader is on the page. It is there in both modes.
| Part | What it shows |
|---|---|
| Arrows | Jump to the previous or next section |
| Track | A thumb that moves with the reader's position. Click the track to jump there |
| Percentage | How far through the page the reader is |
| Section label | The name of the section in view, for example Live updates or Reading |
| Counter | The section's place in the page, for example 03 / 12 |
On a post with headings, the middle of the bar also shows the heading being read. See Table of Contents.
On a page with a single section, the arrows and the counter are hidden.
The Reader's Choice#
Readers switch between the two modes in two ways:
- the Reading mode row of the settings panel, opened from the gear icon in the top bar
- the
rkey, on any page that follows the reader's choice
The choice is kept in the reader's own browser and applies to every page and every later visit. It is not tied to a member account, so a reader on a second device starts with Columns again. See Reading Preferences.
Turning Columns Off for Everyone#
If you want a vertical site, add reading-columns to Disabled features.
- Go to ⛭ Settings → Design
- Click Customize
- Open the Theme tab
- Add
reading-columnsto Disabled features, separated from the other values by a comma - Click Save
Every page then stacks its sections on every screen. The Reading mode row disappears from the settings panel, and the r key does nothing. The bottom bar stays. See Features.
Notes#
- The sideways layout depends on the window, not the device. A laptop window made narrow or short switches to the stacked layout at once, and back again when it grows.
- The section headings of the front page run up the left edge of each section on a sideways page and sit above the section when it stacks.
- A section with nothing to show is left out of the page and out of the counter. See Front Page Overview.