Template:VerticalGrid/doc: Difference between revisions

From Rhythm Heaven Wiki
Jump to navigation Jump to search
(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...")
 
No edit summary
Line 1: Line 1:
== Template:VerticalGrid ==
== 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 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 and make trouble for mobile viewers. By using this template properly, these problems can be addressed.
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}}: Cells of the grid. Use {{tlc|VerticalGridCell}} to create cells.
* {{param|1}}: Contents of the grid. Use {{tlc|VerticalGridCell}} to create cells.
* {{param|nowrap}}:
* {{param|class}}: Space-separated HTML classes to add to the grid. A grid always has a <code>vertical-grid</code> class.
** If given any non-empty string, the grid is adjusted to the minimum width such that contents within each cell don't auto wrap. A horizontal scrollbar is enabled when the width exceeds full width. Usually you need this for lyrics.
* {{param|style}}: CSS to add to the grid.
** Otherwise, the grid takes up full width. Each column takes up equal width within the grid. Usually you need this for reading materials.
* {{param|column-gap}}: Gap width between columns. 2em by default.
* {{param|align-items}}: Vertical alignment of contents within each cell. See [https://developer.mozilla.org/en-US/docs/Web/CSS/align-items MDN docs] for all possible values.


== Template:VerticalGridCell ==
== 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.


== Examples ==
== Styling ==
(To be added)<!--
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 &lt;p&gt; 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>

Revision as of 17:42, 23 September 2025

Grid

Shortcut

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:

  • {{{1}}}: Contents of the grid. Use {{VerticalGridCell}} to create cells.
  • {{{class}}}: Space-separated HTML classes to add to the grid. A grid always has a vertical-grid class.
  • {{{style}}}: CSS to add to the grid.

Cell

Shortcut

Template:VerticalGridCell creates a cell that adds to a grid created with {{VerticalGrid}}.

Parameters:

  • {{{1}}}: Content of the cell.
  • {{{poem}}}: If given, replace the content with the output of passing this argument to {{Poem}}. (So that you don't need to transclude {{Poem}} yourself.)
  • {{{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 x/z or x/span y.
  • {{{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 span x; otherwise, omit this argument.
  • {{{class}}}: Space-separated HTML classes to add to the cell. A cell always has a vertical-grid-cell class.
  • {{{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 nowrap 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:

Notice that if {{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 row-gap attribute when the margins are enough to tell cells apart.

Retrieved from "https://rhwiki.net/w/index.php?title=Template:VerticalGrid/doc&oldid=99929"