User:Inductiveload/Sandbox/Mobile

Wikisource works can be accessed by mobile devices in two primary ways:


 * The use of the mobile website
 * Exporting of EPUB, MOBI or PDF file using the ws-export tool

Mobile devices usually have relatively small screens compared to desktop browsers, and some kinds of formatting can make works difficult to read on these devices. Where possible and practical, Wikisource works should be readable on mobile devices.

Screen size
Most phones have effective screen widths of between 350px and 450px. Though phone screens are often much larger in terms of physical pixel count, content is magnified by a factor of 2, 3 or 4 to make it legible on such physically-small screens. Some commons example sizes:


 * iPhone 6, 7 and 8: 375px (750 physical pixels, scale factor 2)
 * Galaxy Note 3: 360px (1080 physical pixels, scale factor 3)
 * Galaxy S9: 360px (1440 physical pixels, scale factor 4)

Tablets have somewhat larger effective sizes due to their physically larger size:


 * iPad 1, 2: 768px (768 physical pixels, no scaling)
 * iPad 3, 4: 768px (1536 physical pixels, scale factor 2)
 * Nexus 7: 600px (1200 physical pixels, scale factor 2)

Readers
Mobile devices generally use apps to read ebooks. Both EPUB and MOBI formats are based on HTML, so Wikisource content generally translates directly to these formats. However, apps vary in their ability to render HTML in the same way as on the Wikisource website.

Wikisource works should not be adapted to overcome limitations or quirks of individual reader apps, unless such adaptations are not destructive to the formatting on other devices, and do not introduce excessive complexity in the wikitext markup. In general, Wikisource should provide correct and standard HTML and CSS markup and expect readers to handle it according the specifications.

Images
Images generally do not need special treatment to render correctly on mobile.

The mobile website applies special CSS to all images that makes sure they do not become wider than the page. Even large images will not exceed the page limits. E-reader apps also usually do this automatically.

In general, you do not need to make special provisions for images, no matter the size, in Wikisource works.

Fixed-width formatting
Fixed-width formatting, where a block of text has a width that cannot adapt to small screens should be avoided, as this causes problems for readers:
 * On some devices, it means the reader needs to scroll right and left on every line of the text (e.g. the mobile website and the Moon Reader+ app)
 * On other devices, there may not be any scroll available and the text will be unreadable (e.g. the Overdrive app does this)

This is an example of a fixed-width layout that will exceed the screen limits on small device (blue is the screen limit, red is the fixed-width text container):

This div is sized with.

Almost always, you do not need to fix the width exactly. Instead, you need to set a maximum width, for example to prevent an epigraph taking up the full page width. You can do this with the CSS  property:

This div is sized with, but on a 360px screen, it'll be smaller.

When the container is larger than the  value, the text will have that width:

This div is sized with, and since the container is wider that that (800px), that is the size we get.

Use of max-width rather than width is generally important in templates like block center and AuxTOC.

Line wrapping
Disabling line wrapping can have similar effects to forcing an exact width:

This div uses

This means that long lines, like this one, for example, will not wrap, even if they extend off the the screen.

The text escapes from the div (red), though the div itself remains contained in the blue container.

On some devices, the ends of these lines cannot be seen at all.

Great care should be taken when using, as if the content is longer than a screen is wide, it can become unreadable.

Columns
Many works were originally typeset in columns. This frequenctly does not translate well to small devices, because the columns become very narrow on small screens. If the original intent of the columns was simply typographical (for example to reduce the vertical length of a list, or to avoid excessively long line on a large page with small type), it might be more suitable to either not use columns, or use "soft" columns that can collapse to a single column on small screens.

Generally, works typeset in columns due to the paper and type size do not have the columns preserved at Wikisource. An example of this is the 1911 Encyclopædia Britannica, which was originally in two columns, but is transcribed without columns.

The multicol templates use a table to simulate columns. Columns made in this way will never collapse to a single column. This means it's possible for the content to disappear from the right margin, or become extremely narrow. If the columns are absolutely necessary, this may be unavoidable.

The div col templates use CSS to produce "soft" columns. If you use the parameter to limit the column width, the columns will display if there is space for them:

This text specifies 2 columns with div col, but has a minimum column size of 200px. In a 500px container, both columns fit.

However, they automatically collapse to a single column on a small screen:

This text specifies 2 columns with div col, but has a minimum column size of 200px. In a 360px container, only one column columns fits, and the text collapses seamlessly to a single column.

For lists, which were typeset in columns originally to save space, such soft columns may be a better choice, as they allow the original formatting where it's readable, but they degrade gracefully to a single column to remain readable on small screens.

Forcing layouts
Some works look best in certain layouts on the desktop website. Specifically, plays and some articles look better in a centralised narrow column that in a full-width container. Wikisource has a dedicated system to do this: Dynamic Layouts, which allows the user to select their preferred layout.

You can recommend a layout by using the default layout template on the work in the main namespace. If the user has not disallowed default layouts (it is opt-out, and enabled by default), they'll see the work with the layout you intended.

According to Help:Layout, you should not wrap your content in a div to apply manual layout formatting (for example, forcing a specific margin or width). This formatting will not only interfere with the user's preferred layout on desktop, it will also end up in the mobile and export formats, where it is likely to not work as intended.