diff --git a/css/smpte.css b/css/smpte.css index 9fbdf05..280b1eb 100644 --- a/css/smpte.css +++ b/css/smpte.css @@ -293,78 +293,79 @@ tbody { text-align: left; } -td.center-cell { - text-align: center; -} - -table.col-1-center tr td:nth-child(1) { - text-align: center; -} - -table.col-2-center tr td:nth-child(2) { - text-align: center; -} +/* cell alignment utilities */ -table.col-3-center tr td:nth-child(3) { - text-align: center; -} +td.center-cell { text-align: center; } +td.right-cell { text-align: right; } +td.left-cell { text-align: left; } +td.top-cell { vertical-align: top; } -table.col-4-center tr td:nth-child(4) { - text-align: center; -} +/* column alignment utilities */ -table.col-5-center tr td:nth-child(5) { - text-align: center; -} +/* center */ -table.col-6-center tr td:nth-child(6) { - text-align: center; -} - -table.col-7-center tr td:nth-child(7) { - text-align: center; -} - -table.col-8-center tr td:nth-child(8) { - text-align: center; -} - -/* column nowrap utilities */ + table.col-1-center tr td:nth-child(1), table.col-2-center tr td:nth-child(2), + table.col-3-center tr td:nth-child(3), table.col-4-center tr td:nth-child(4), + table.col-5-center tr td:nth-child(5), table.col-6-center tr td:nth-child(6), + table.col-7-center tr td:nth-child(7), table.col-8-center tr td:nth-child(8) { + text-align: center; + } -table.col-1-nowrap tr td:nth-child(1), table.col-1-nowrap tr th:nth-child(1) { - white-space: nowrap; -} +/* right */ -table.col-2-nowrap tr td:nth-child(2), table.col-2-nowrap tr th:nth-child(2) { - white-space: nowrap; -} + table.col-1-right tr td:nth-child(1), table.col-2-right tr td:nth-child(2), + table.col-3-right tr td:nth-child(3), table.col-4-right tr td:nth-child(4), + table.col-5-right tr td:nth-child(5), table.col-6-right tr td:nth-child(6), + table.col-7-right tr td:nth-child(7), table.col-8-right tr td:nth-child(8) { + text-align: right; + } -table.col-3-nowrap tr td:nth-child(3), table.col-3-nowrap tr th:nth-child(3) { - white-space: nowrap; -} +/* left */ -table.col-4-nowrap tr td:nth-child(4), table.col-4-nowrap tr th:nth-child(4) { - white-space: nowrap; -} + table.col-1-left tr td:nth-child(1), table.col-2-left tr td:nth-child(2), + table.col-3-left tr td:nth-child(3), table.col-4-left tr td:nth-child(4), + table.col-5-left tr td:nth-child(5), table.col-6-left tr td:nth-child(6), + table.col-7-left tr td:nth-child(7), table.col-8-left tr td:nth-child(8) { + text-align: left; + } -table.col-5-nowrap tr td:nth-child(5), table.col-5-nowrap tr th:nth-child(5) { - white-space: nowrap; -} +/* top */ -table.col-6-nowrap tr td:nth-child(6), table.col-6-nowrap tr th:nth-child(6) { - white-space: nowrap; -} + table.col-1-top tr td:nth-child(1), table.col-2-top tr td:nth-child(2), + table.col-3-top tr td:nth-child(3), table.col-4-top tr td:nth-child(4), + table.col-5-top tr td:nth-child(5), table.col-6-top tr td:nth-child(6), + table.col-7-top tr td:nth-child(7), table.col-8-top tr td:nth-child(8) { + vertical-align: top; + } -table.col-7-nowrap tr td:nth-child(7), table.col-7-nowrap tr th:nth-child(7) { - white-space: nowrap; -} +/* column nowrap utilities */ -table.col-8-nowrap tr td:nth-child(8), table.col-8-nowrap tr th:nth-child(8) { - white-space: nowrap; -} + table.col-1-nowrap tr td:nth-child(1), table.col-1-nowrap tr th:nth-child(1), + table.col-2-nowrap tr td:nth-child(2), table.col-2-nowrap tr th:nth-child(2), + table.col-3-nowrap tr td:nth-child(3), table.col-3-nowrap tr th:nth-child(3), + table.col-4-nowrap tr td:nth-child(4), table.col-4-nowrap tr th:nth-child(4), + table.col-5-nowrap tr td:nth-child(5), table.col-5-nowrap tr th:nth-child(5), + table.col-6-nowrap tr td:nth-child(6), table.col-6-nowrap tr th:nth-child(6), + table.col-7-nowrap tr td:nth-child(7), table.col-7-nowrap tr th:nth-child(7), + table.col-8-nowrap tr td:nth-child(8), table.col-8-nowrap tr th:nth-child(8) { + white-space: nowrap; + } /* column width utilities */ +/* xsmall */ + + table.col-1-xsmall tr td:nth-child(1), table.col-1-xsmall tr th:nth-child(1), + table.col-2-xsmall tr td:nth-child(2), table.col-2-xsmall tr th:nth-child(2), + table.col-3-xsmall tr td:nth-child(3), table.col-3-xsmall tr th:nth-child(3), + table.col-4-xsmall tr td:nth-child(4), table.col-4-xsmall tr th:nth-child(4), + table.col-5-xsmall tr td:nth-child(5), table.col-5-xsmall tr th:nth-child(5), + table.col-6-xsmall tr td:nth-child(6), table.col-6-xsmall tr th:nth-child(6), + table.col-7-xsmall tr td:nth-child(7), table.col-7-xsmall tr th:nth-child(7), + table.col-8-xsmall tr td:nth-child(8), table.col-8-xsmall tr th:nth-child(8) { + width: 2rem; + } + /* small */ table.col-1-small tr td:nth-child(1), table.col-1-small tr th:nth-child(1), @@ -406,6 +407,10 @@ table.col-8-nowrap tr td:nth-child(8), table.col-8-nowrap tr th:nth-child(8) { /* cell width utilities */ +th.col-xsmall, td.col-xsmall { + width: 2rem; +} + th.col-small, td.col-small { width: 8rem; } @@ -501,6 +506,12 @@ div.formula > .heading-label { break-before: page; } +/* list utilities */ + +ul.list-none { + list-style-type: none; +} + /* text utilities */ .text-nowrap, diff --git a/doc/main.html b/doc/main.html index ef44be0..834d7d3 100644 --- a/doc/main.html +++ b/doc/main.html @@ -1360,8 +1360,11 @@
class attributesexamplep or div elements to create a formatted and automatically numbered example. See .center-celltd element to center-align the content of that individual table cell. See .center-cell;right-cell;left-cell;top-celltd element to override the alignment of that individual table cell. See .text-nowrapth or td elements to keep short identifiers, tags, or codes on a single line. See class attributescol-1-nowrap through col-8-nowraptable element to prevent line wrapping within the specified column. See col-xsmall;col-small;col-medium;col-wideth or td elements to suggest a relative column width for that cell. These classes provide narrow, medium, or wide column layouts without using inline style attributes. See th or td elements to suggest a relative column width for that cell. These classes provide extra-narrow, narrow, medium, or wide column layouts without using inline style attributes. See col-1-xsmall through col-8-xsmall;col-1-small through col-8-small;col-1-medium through col-8-medium;col-1-wide through col-8-widetable element to suggest relative widths for specific columns. See col-1-center through col-8-centertable element to center-align the contents of the specified column. Multiple classes may be combined to center multiple columns. See .col-1-center through col-8-center;col-1-right through col-8-right;col-1-left through col-8-left;col-1-top through col-8-toptable element to override the alignment of the specified column. Multiple classes may be combined to align multiple columns. See .list-noneul element to remove bullet markers. See .formuladiv element that contains a block math element to format and number displayed formulae. See
- To change the alignment of an entire column, a class such as col-3-center may be added to the table denoting which column to center align, as the below example shows.
+ To change the alignment of an entire column, classes such as col-3-center, col-3-right, col-3-left, or col-3-top may be added to the table element. Multiple alignment classes may be combined across different columns, and multiple classes targeting the same column are also allowed since horizontal (text-align) and vertical (vertical-align) alignment are independent properties, as the below example shows.
is rendered as
-| Sample Number | -Sample Name | +Value | Sample Code |
|---|---|---|---|
| 0001 | -Name 01 | +42 | Code 1 |
| 0002 | -Name 02 | +This is a longer description that spans multiple lines to demonstrate how col-2-top and col-2-right may be combined on the same column to independently control vertical and horizontal alignment. |
Code 2 |
| 0003 | -Name 03 | +8 | Code 3 |
- Classes are available to center align columns 1-8 (as col-x-center), and multiple classes to table may be added to align more columns as needed.
+ Alignment classes are available for columns 1–8 using col-x-center, col-x-right, col-x-left, and col-x-top. Multiple classes may be combined on the same table to align different columns independently.
Tables over 8 columns wide should not be used and instead split into multiple smaller tables. @@ -1771,15 +1782,15 @@
- To change the alignment of an individual cell, the class center-cell may be added to each td as needed, as the below example shows.
+ To change the alignment of an individual cell, classes such as center-cell, right-cell, left-cell, or top-cell may be added to each td as needed, as the below example shows.
is rendered as
| Sample Number | @@ -1789,29 +1800,30 @@|||
|---|---|---|---|
| 0001 | +0001 | Name 01 | Code 1 |
| centered 0002 | +0002 | Name 02 | Code 2 |
| 0003 | +0003 | Name 03 | Code 3 |
| 0004 | +Name 04 | +This is a longer description that spans multiple lines to demonstrate how the top-cell class aligns the content of the first two cells to the top of the row rather than the default middle alignment when adjacent cells contain more content. |
+
- The center-cell class may be added to as many td as needed.
-
- Vertical cell alignment is not available at this time, and the default is set to top.
+ Cell alignment classes may be added to as many td elements as needed and may be combined with column-level alignment classes.
-<table id="tab-sample-tabledata-widthcolumn" class="col-3-nowrap col-1-small col-4-wide">
+<table id="tab-sample-tabledata-widthcolumn" class="col-3-nowrap col-1-xsmall col-4-wide">
<caption>Column-level Width and No-wrap Table Sample</caption>
<thead>
<tr>
@@ -2126,7 +2138,7 @@ Column Width and No-wrap (Column-level)
is rendered as
- | Sample Number | @@ -9,19 +9,24 @@|||
|---|---|---|---|
| 0001 | +0001 | Name 01 | Code 1 |
| centered 0002 | +0002 | Name 02 | Code 2 |
| 0003 | +0003 | Name 03 | Code 3 |
| 0004 | +Name 04 | +This is a longer description that spans multiple lines to demonstrate how the top-cell class aligns the content of the first two cells to the top of the row rather than the default middle alignment when adjacent cells contain more content. |
+
| Sample Number | -Sample Name | +Value | Sample Code |
|---|---|---|---|
| 0001 | -Name 01 | +42 | Code 1 |
| 0002 | -Name 02 | +This is a longer description that spans multiple lines to demonstrate how col-2-top and col-2-right may be combined on the same column to independently control vertical and horizontal alignment. |
Code 2 |
| 0003 | -Name 03 | +8 | Code 3 |