420
edits
Template:VerticalGrid/doc: Difference between revisions
no edit summary
HyperNervie (talk | contribs) (Created page with "== Template:VerticalGrid == {{shortcut|template=1|vg}} Template:VerticalGrid creates a grid where cells are filled vertically. This helps with the typesetting of reading materials and lyrics where many languages are put together. If presenting these things in a table, selecting text in a single column across rows also selects text from other columns, which is annoying when readers want to copy text in one language; on narrow devices, such contents are usually squeezed an...") |
HyperNervie (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
== | == Grid == | ||
{{shortcut|template=1|vg}} | {{shortcut|template=1|vg}} | ||
Template:VerticalGrid creates a grid where cells are filled vertically. This helps with the typesetting of reading materials and lyrics | Template:VerticalGrid creates a grid where cells are filled vertically. This helps with the typesetting of reading materials and lyrics. If presenting these things in a table, selecting text in a single column across rows also selects text from other columns, which is annoying when readers want to copy text in one language; on narrow devices, such contents are usually squeezed and make trouble for mobile viewers. By using this template properly, these problems can be addressed. | ||
Parameters: | Parameters: | ||
* {{param|1}}: | * {{param|1}}: Contents of the grid. Use {{tlc|VerticalGridCell}} to create cells. | ||
* {{param| | * {{param|class}}: Space-separated HTML classes to add to the grid. A grid always has a <code>vertical-grid</code> class. | ||
* {{param|style}}: CSS to add to the grid. | |||
* {{param| | |||
== | == Cell == | ||
{{shortcut|template=1|vgc}} | {{shortcut|template=1|vgc}} | ||
Template:VerticalGridCell creates a cell that adds to a grid created with {{tlc|VerticalGrid}}. | Template:VerticalGridCell creates a cell that adds to a grid created with {{tlc|VerticalGrid}}. | ||
| Line 20: | Line 17: | ||
* {{param|column}}: Column number starting from 1. To span across several columns (assume the cell is in column ''x'' and you want it to span across ''y'' columns so that the next column is ''z''=''x''+''y''), fill <code>''x''/''z''</code> or <code>''x''/span ''y''</code>. | * {{param|column}}: Column number starting from 1. To span across several columns (assume the cell is in column ''x'' and you want it to span across ''y'' columns so that the next column is ''z''=''x''+''y''), fill <code>''x''/''z''</code> or <code>''x''/span ''y''</code>. | ||
* {{param|row}}: Usually the cell is placed below cells before it that take up the same column, so the row number is automatic. If the cell spans across several rows (assume ''x'' rows), fill <code>span ''x''</code>; otherwise, omit this argument. | * {{param|row}}: Usually the cell is placed below cells before it that take up the same column, so the row number is automatic. If the cell spans across several rows (assume ''x'' rows), fill <code>span ''x''</code>; otherwise, omit this argument. | ||
* {{param|class}}: Space-separated HTML classes to add to the cell. A cell always has a <code>vertical-grid-cell</code> class. | |||
* {{param|style}}: CSS to add to the cell. The colon of the last CSS attribute cannot be omitted. | |||
== | == Styling == | ||
( | By default, columns divide the grid width evenly (at least 16em wide), with 2em-wide gaps in between. Adding a <code>nowrap</code> class to the grid changes minimum column width from 16em to a value such that text within cells doesn't auto wrap. In both cases, if columns overflow, a horizontal scrollbar is enabled. | ||
You might be interested in these CSS attributes: | |||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap column-gap]</code> (grid only) | |||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap row-gap]</code> (grid only) | |||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/align-items align-items]</code> (grid only) | |||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/align-self align-self]</code> (cell only) | |||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/text-align text-align]</code> | |||
Notice that if {{tlc|nolink=1|Poem}} is used in cells, there will be margins as a consequence of <p> tags coming with poem, making visual gaps between cells. So you don't need to set the <code>row-gap</code> attribute when the margins are enough to tell cells apart.<!-- | |||
--><noinclude>[[Category:Template documentation]]</noinclude><includeonly>[[Category:Templates]]</includeonly> | --><noinclude>[[Category:Template documentation]]</noinclude><includeonly>[[Category:Templates]]</includeonly> | ||