Which Side Is Page One? Designing Arabic Apps for the iPhone Duo

Open an Arabic book and you start from what an English reader would call the back. Every Arab child knows this, and every Arabic reader's thumb knows it too. Now Apple has shipped a phone that opens like a book. The iPhone Duo's wide inner screen invites two-pane layouts, side navigation and page-style reading, and teams across the Gulf are planning their Duo layouts right now. Demand is clearly there: The National reports that orders have overwhelmed stock, pushing UAE deliveries into late January.

What I haven't seen in any of the early design write-ups is a single line about right-to-left reading. So here is how I'm thinking about Arabic layouts on a book-shaped phone, and the questions I expect MENA product teams to hit first.

What the iPhone Duo changes

The short version: you now have a phone that, when opened, has roughly the proportions of a small open book. In The Pocket's breakdown walks through the different postures the device supports, from closed and phone-like to fully open and propped up. Each posture is a slightly different design context.

Apple's own framing, as the early write-ups describe it, is to design like an iPhone, not an iPad. I agree with the spirit of that. The worst thing you can do is take your phone layout and stretch it across the whole surface, which is exactly the point of UX Collective's "Please don't stretch your app for foldables". Long lines of text, giant buttons and empty margins make a premium device feel cheap. The better approach is to use the extra width for a second, related view.

That's where RTL gets interesting, because "a second view" means deciding which side each view lives on.

The two-pane question: what "leading" means on a book

Most foldable layouts end up as list–detail or master–detail: inbox and message, product list and product page, chat list and conversation. In LTR, the list sits on the left and the detail opens on the right. The eye travels from list to detail in reading order.

In Arabic, that order should mirror completely:

• The list sits on the right (the leading side) and the detail on the left.
• Selection moves the eye leftward, from the item to its content, just as reading does.
• Transitions should travel right to left. When the detail pane updates or a new level pushes in, the motion should follow the Arabic reading direction.
• The divider and resize handle should behave the same in both languages, but any "collapse list" control belongs on the leading side.

This sounds obvious, but it breaks easily. Teams often build the two-pane layout with fixed left and right positions instead of leading and trailing ones, and then the Arabic version shows the list on the left with right-aligned text inside it. It reads like a book bound on the wrong side. If your layouts already use logical properties, as I recommend in my RTL app design checklist, most of this comes for free. If they don't, the Duo is a good reason to fix it.

Navigation moving to the side

On a regular phone, navigation lives at the top and bottom edges. On a wide open screen, it often moves to a side rail or a sidebar, which is more comfortable to reach and frees up vertical space.

In Arabic, that rail belongs on the right edge. A few details to get right:

• Icon order runs top to bottom as usual, but labels sit to the left of icons and align right.
• Toolbars inside a pane should keep the primary action at the leading end, so in Arabic it starts on the right.
• Back and forward controls flip, so "back" points right. Media playback controls do not flip. I'll go deeper into which icons mirror in a separate post.
• Thumb reach changes when the device is held like a book. Test with real hands, and with both left- and right-handed people, before you decide where the primary action goes.

Book and reading layouts

This is the area where a mistake will be most visible, because the device literally looks like a book. Any app with long-form reading (news, Quran and religious apps, e-books, magazines, learning content, even onboarding carousels) has to decide how pages work in a two-page spread.

For Arabic content:

1. Page one sits on the right in a spread, page two on the left.
2. Going forward means swiping from left to right, revealing the next page from the left side, like turning a page in a printed Arabic book.
3. Progress bars and page indicators fill from the right. Dots in a carousel should also run right to left.
4. Bilingual apps need a rule per content item, not per app. An English article inside an Arabic app should paginate like an English book.

Users who read Arabic books will feel the difference instantly, even if they can't say what's wrong. Getting it right is one of those details that makes an app feel made for them.

[Waleed: add a before/after sketch of an Arabic two-page reading spread, showing page order and swipe direction.]

The hinge and mixed scripts

Even with a near-invisible crease, the centre of a foldable is a place to avoid putting anything that needs to be read precisely. With Arabic, three things deserve extra care:

• Bidi text across the centre. A line that mixes Arabic with English product names, prices or codes is already prone to reordering problems. If that line spans the fold, it becomes much harder to read. Prefer layouts where mixed-script lines stay within one pane.
• Numbers and amounts. Prices, phone numbers and OTP codes should never sit across the hinge. A misread digit is a real problem in payments.
• Grid columns. If you use a two-column grid on the open screen, align the column gap with the fold. A three-column grid that puts a column right on the crease is asking for trouble.

A testing checklist for Arabic apps on foldables

Whether you're targeting the iPhone Duo or Android foldables, run through this in both Arabic and English before release:

• List–detail panes are mirrored, and the list sits on the leading side.
• Pane transitions and push animations follow the reading direction.
• Side rails and toolbars sit on the leading edge, with correct label alignment.
• Directional icons flip; media and clock icons don't.
• Two-page reading views paginate right to left for Arabic content and left to right for English content.
• Progress indicators and carousel dots fill from the correct side.
• No mixed-script lines, prices or codes sit across the fold.
• Every posture is tested: closed, half-open and fully open, in portrait and landscape.
• Switching language while the app is open doesn't leave panes in the wrong order.

Closing thoughts

A foldable that opens like a book is a gift for Arabic design, if we treat it like an Arabic book. The direction rules are the same ones we already apply on phones; they just become far more visible on a wider screen. The teams that get the leading side, navigation and pagination right from the first release will feel native. The rest will feel like a translation. If you're also rethinking your components for this, my post on making design systems RTL-aware is a good next step.

Sources: One iPhone, six poses (In The Pocket), Please don't stretch your app for foldables (UX Collective), Apple to "work hard" to fulfil iPhone Duo deliveries (The National).

FAQs