সাহায্য:Layout

Dynamic Layouts

Dynamic layouts are CSS style sheets that are applied dynamically.

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.

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.

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.

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 reaches right 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 centred fixed-width column. Sidenotes are displayed in empty margins of the page, on the last 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.