Bantuan:Layout

←

Dynamic Layouts

→

Wikisource provides a system called Dynamic Layouts, which allows editors and readers to choose how they read texts here. Readers can select the layout that works best for them, and editors can recommend "default" layouts on a work-by-work basis (which readers can choose to use, or not).

Example: The Solar System/Chapter 1. Check the "Layout x" link in the margin and see how the text properties are adapted to each layout.

For these texts, users can choose between different layouts in the "Display Options" menu.

How to use dynamic layouts

The Display Options sidebar menu

A reader can cycle through the available dynamic layouts by selecting the first link under "Display options" in the sidebar menu. This link will have the name of the current layout, by default this will be "Layout 1." Each click will cycle to the next layout in sequence; when the final layout is reached, layout 1 will be the next option. This setting will persist across page loads: you do not need to change it again for each page you visit.

Default layouts

A specific dynamic layout can be set for a page with the {{default layout}} template. When a page is opened, it will open on the specified layout instead of the user's current default layout (which is Layout 1, unless they have changed it). The reader can still cycle through other layouts with the "Display options" menu.

For example: {{default layout|Layout 2}} will set the default layout for a page to Layout 2.

There is no need set a default for Layout 1 as this is already the default layout for the entire project.

Readers can turn off the use of default layouts with the second link in the menu, labelled Default layouts on/off. When default layouts are "off", the user's previously-selected layout will be used (as if the page did not have a {{default layout}} template at all).

Available layouts

The following table shows the default layouts available for all users.

Layout name	Description
Layout 1	The default layout as seen by a user with no options already set. The text spans across the page, sidenotes are enclosed in a bordered box.
Layout 2	The text is justified and enclosed in a centered fixed-width column (36em). Sidenotes are displayed in empty margins of the page, on the left and right. Similar to the style used on the French and Italian Wikisources.
Layout 3	Header is displayed on the right of the pages, the text content on the left, justified. Sidenotes are shown in the space under the header. Similar to the style at German Wikisource.
Layout 4	Equivalent to Layout 2 (central fixed-width column, justified)

Font control

Lihat juga: Help:Fonts

The display options also allow you to change between serif and sans-serif fonts. This option will apply to the entire "main content" of the page.

If you are using the accessible fonts provided by the ULS font system (e.g. OpenDyslexic or Comic Neue), using dynamic serif fonts will override that setting. Use the default sans-serif setting to allow ULS to set these fonts.

Good editing practices

Dynamic layouts assume a separation between form and content. Thus, your text should not make any assumption about the layout that will be used to render it. In particular, you should not wrap the <pages/> tag, or transclusions using the {{Page}} template, inside a container div, or inside a table.

Things to remember:

even if you set a {{default layout}}, the user can opt for any other layout according to their needs and preferences
Dynamic Layouts apply only at Wikisource: the works should still be formatted correctly and legible when exported

How to write dynamic layouts

Dynamic layouts are defined in a javascript variable called self.WSLayouts.

This variable is a dictionary-like object, where each item is a list of CSS class names and a display name. When selected, that class will be prepended with dynlayout- and applied to the page's parent element.

Users can define their own layouts, by adding elements to self.WSLayouts in their user JavaScript and matching CSS to their user CSS.

Example

common.js

mw.hook( 'ws.layouts.register' ).add( function ( cfg ) {
	cfg.layouts.push( {
		name: 'My layout', // what you see in the menu
		id: 'my_layout'    // the name of the layout's class
	} );
} );

common.css

.dynlayout-my_layout {
    color: red;
}

Templates

Templates can be adapted to dynamic layouts. For example, sidenotes created with {{Right sidenote}} are rendered in a way that depends on the layout.

If a template makes assumption about the layout, then it must be adapted to dynamic layouts.