DramaWiki DramaWiki

This page describes two ways to format text (and lists) in multiple columns with the help of templates instead of HTML-code. It may be useful to format long or structured cast lists on drama pages (see examples 1a and 2d).

Simple multi-column text template

Plain text (or long lists) wrapped into {{multicolumntext}} and {{multicolumn-end}} templates will be broken into multiple columns. The desired number of columns can be passed as parameter to the {{multicolumntext}} template. However, as editor using this template you have no control over the column breaks. The browser arranges the text so that it equally fits all columns. If you want to control the column breaks then it's recommended to use the multi-column text templates with column-break control instead.

Example 1: A long list broken into three columns

Wikitext	As displayed by the browser
;Large cities in Asia {{multicolumntext|3}} *Tokyo *Seoul *Mumbai *Jakarta *Osaka *Shanghai *Manila *Hong Kong *Tehran *Kolkata *Beijing *Hanoi *Dubai {{multicolumn-end}}	Largest cities in Asia Tokyo Seoul Mumbai Jakarta Osaka Shanghai Manila Hong Kong Tehran Kolkata Beijing Hanoi Dubai

Some use cases for text containing an image are showed below. Note: the red dashed border was added here only to indicate the start and end of the multi-column section.

Example 1a: Text with an image placed before the multi-column section

The right floating image gets "swallowed" into the box and floats besides the text. (recommended for cast lists)

Plain text (or lists) wrapped into these templates will be broken into multiple columns (two in this example). The first parameter specifies the number of columns. As editor you have no control over the column breaks. The browser arranges the text so that it equally fits all columns. If you want to control the column breaks then it's recommended to use the {{multicol}} / {{multicol-break}} / {{multicol-end}} templates instead.

How it works: The template uses a DIV with a column-count parameter. For compatibility reasons the template also supports vendor specific column parameter (for Mozilla, Chrome and Safari web browsers).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example 1b: Text with an image at the beginning of the multi-column section

The right floating image is placed into first column. (not useful)

With this template plain text (or lists) will be broken into multiple columns (two in this example). As editor you have no control over the column breaks. The browser arranges the text so that it equally fits all columns. If you want to control the column breaks then it's recommended to use the {{multicol}} / {{multicol-break}} / {{multicol-end}} templates instead.

How it works: The template uses a DIV with a column-count parameter. For compatibility reasons the template also supports vendor specific column parameter (for Mozilla, Chrome and Safari web browsers).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example 1c: Text with an image in the middle of the multi-column section

The right floating image is placed somewhere in the middle of the text. (not recommended)

With this template plain text (or lists) will be broken into multiple columns (two in this example). As editor you have no control over the column breaks. The browser arranges the text so that it equally fits all columns. If you want to control the column breaks then it's recommended to use the {{multicol}} / {{multicol-break}} / {{multicol-end}} templates instead.

How it works: The template uses a DIV with a column-count parameter. For compatibility reasons the template also supports vendor specific column parameter (for Mozilla, Chrome and Safari web browsers).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example 1d: Text with an image at the end of the multi-column section

The right floating image is placed at the end of the last column.

With this template plain text (or lists) will be broken into multiple columns (two in this example). As editor you have no control over the column breaks. The browser arranges the text so that it equally fits all columns. If you want to control the column breaks then it's recommended to use the {{multicol}} / {{multicol-break}} / {{multicol-end}} templates instead.

How it works: The template uses a DIV with a column-count parameter. For compatibility reasons the template also supports vendor specific column parameter (for Mozilla, Chrome and Safari web browsers).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multi-column text with column-break control

The {{multicol}} templates are useful to break text with headings into multiple columns. The {{multicol}} template is used to start a multi-column section of a page. With the {{multicol-break}} template an new text column is started. The last column is closed with the {{multicol-end}} template.

Example 2: Three sublists formatted as three columns

Wikitext	As displayed by the browser
;Large cities in Asia (by population) {{multicol}} ;Japan *Yokohama *Osaka *Nagoya *Sapporo *Kōbe *Kyoto *Fukuoka {{multicol-break}} ;China *Chongqing *Shanghai *Beijing *Chengdu *Tianjin *Guangzhou {{multicol-break}} ;South Korea *Seoul *Busan *Incheon *Daegu *Daejeon *Gwangju *Ulsan {{multicol-end}}	Large cities in Asia (by population) Japan Yokohama Osaka Nagoya Sapporo Kōbe Kyoto Fukuoka China Chongqing Shanghai Beijing Chengdu Tianjin Guangzhou South Korea Seoul Busan Incheon Daegu Daejeon Gwangju Ulsan

Example 2a: Text with an image placed before the multi-column section

The right floating image overlaps with the text section. (not recommended)

With this template you can format text into multiple columns by starting a new column within the text section. The multi-column text is started with the {{multicol}} template. A new column is started with {{multicol-break}}. The last column is closed with the {{multicol-end}} template. How it works: The {{multicol}} creates a borderless TABLE. With each {{multicol-break}} a new table column is started. The table is closed with a {{multicol-end}} template. The table may overlap with floating DIVs.

Column 2 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 3 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example 2b: Text with an image at the beginning of the multi-column section

The right floating image floats within the first text column. (maybe not useful)

With this template you can format text into multiple columns by starting a new column within the text section. The multi-column text is started with the {{multicol}} template. A new column is started with {{multicol-break}}. The last column is closed with the {{multicol-end}} template. How it works: The {{multicol}} creates a borderless TABLE. With each {{multicol-break}} a new table column is started. The table is closed with a {{multicol-end}} template. The table may overlap with floating DIVs.

Column 2 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 3 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example 2c: Text with an image in the middle of a text column

The right floating image floats within the text column. (maybe not useful either)

With this template you can format text into multiple columns by starting a new column within the text section. The multi-column text is started with the {{multicol}} template. A new column is started with {{multicol-break}}. The last column is closed with the {{multicol-end}} template. How it works: The {{multicol}} creates a borderless TABLE. With each {{multicol-break}} a new table column is started. The table is closed with a {{multicol-end}} template. The table may overlap with floating DIVs.

Column 2 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 3 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example 2d: Text with an image placed in the last column of a multi-column section

The image floats within the last text column. (useful for cast lists)

With this template you can format text into multiple columns by starting a new column within the text section. The multi-column text is started with the {{multicol}} template. A new column is started with {{multicol-break}}. The last column is closed with the {{multicol-end}} template. How it works: The {{multicol}} creates a borderless TABLE. With each {{multicol-break}} a new table column is started. The table is closed with a {{multicol-end}} template. The table may overlap with floating DIVs.

Column 2 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 3 starts here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.