ಸಹಾಯ:Layout

Dynamic layouts are CSS style sheets that are applied dynamically.

Example : ಉಮರನ ಒಸಗೆ. Check the "Layout x" link in the margin and see how the text properties are adapted to each layout.

Dynamic layouts are active on all pages that use transclusion from the "Page:" namespace. For these texts, users can choose between different layouts in the "Display Options" menu.

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.

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.

How to write dynamic layouts

Dynamic layouts are defined in a javascript variable called "self.ws_layouts".

This variable is a dictionary-like object, where each item is a list of css properties. Depending on the first character of the key ("#" or "."), CSS properties are applied to a single element or to a class of elements.

Users can define their own layouts, by adding elements to self.ws_layouts in their javascript preferences. Example:

self.ws_layouts['My Layout'] = 
     {'#text-wrap':"position:relative;margin-left:3em;margin-right:3em;", 
      '#text-container':"width:36em;margin:0px auto;" , 
      '#text':"text-align:justify;", 
      '#dp-eu':"position:absolute; right:-20em;top:0em;",
      '.sidenote-right':"position:absolute; left:37em;text-indent:0em;",
      '.sidenote-left':"position:absolute; right:37em;text-indent:0em;",
      '.editsection':"display:none",
      '#headertemplate':"" }

How to use dynamic layouts

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.

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 normal default. The reader can still cycle through other layouts with the "Display options" menu. There is no need to do this for layout 1 as this is already the default layout for the entire project.

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

The {{default layout}} template requires the "Allow layout override" Gadget, which can be enabled or disabled in your your preferences (it is enabled by default). If you do not wish to have the layout overriden for you, turn off this gadget, and pages will load in your currently-set layout. Only use layouts listed below with this template, or users without that layout will not be able to see the intended effect.

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 displayed in a serif font, justified and enclosed in a centered fixed-width column. 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	Header is displayed in the center of the page, the content is centered and justified with non-serif font, 540px column width.