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 @@

Using class attributes

example
Applied to p or div elements to create a formatted and automatically numbered example. See .
-
center-cell
-
Applied to a td element to center-align the content of that individual table cell. See .
+
center-cell;
+
right-cell;
+
left-cell;
+
top-cell
+
Applied to a td element to override the alignment of that individual table cell. See .
text-nowrap
Applied to an element to prevent line wrapping of its contents. This is commonly used on th or td elements to keep short identifiers, tags, or codes on a single line. See
@@ -1369,18 +1372,26 @@

Using class attributes

col-1-nowrap through col-8-nowrap
Applied to a table element to prevent line wrapping within the specified column. See
+
col-xsmall;
col-small;
col-medium;
col-wide
-
Applied to th 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
+
Applied to 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-wide
Applied to a table element to suggest relative widths for specific columns. See
-
col-1-center through col-8-center
-
Applied to a table 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-top
+
Applied to a table element to override the alignment of the specified column. Multiple classes may be combined to align multiple columns. See .
+ +
list-none
+
Applied to a ul element to remove bullet markers. See .
formula
Applied to a div element that contains a block math element to format and number displayed formulae. See
@@ -1724,43 +1735,43 @@

Default Alignment

Column Alignment

- 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

- - +
col-x-center Table Sample
+ - + - + - + - +
col-1-top col-2-top col-2-right col-3-top col-3-center Table Sample
Sample NumberSample NameValue Sample Code
0001Name 0142 Code 1
0002Name 02This 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
0003Name 038 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 @@

Column Alignment

Cell Alignment

- 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

- + @@ -1789,29 +1800,30 @@

Cell Alignment

- + - + - + + + + + +
center-cell Table SampleCell Alignment Table Sample
Sample Number
00010001 Name 01 Code 1
centered 00020002 Name 02 Code 2
00030003 Name 03 Code 3
0004Name 04This 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.

@@ -2097,7 +2109,7 @@

Column Width and No-wrap (Column-level)

-<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

- +
@@ -2416,6 +2428,31 @@

Complex List Example

+ +
+

Unordered List Without Bullets

+ +

+ To remove bullet markers from an unordered list, the class list-none may be applied to the ul element, as the below example shows. +

+ +
+
+<ul class="list-none">
+  <li>First list item</li>
+  <li>Second list item</li>
+  <li>Third list item</li>
+</ul>
+ +

is rendered as:

+
    +
  • First list item
  • +
  • Second list item
  • +
  • Third list item
  • +
+
+
+

Document Status Workflow

diff --git a/doc/snippets/tab-sample-tabledata-centercell.txt b/doc/snippets/tab-sample-tabledata-centercell.txt index 98fea30..af8e620 100644 --- a/doc/snippets/tab-sample-tabledata-centercell.txt +++ b/doc/snippets/tab-sample-tabledata-centercell.txt @@ -1,5 +1,5 @@
Column-level Width and No-wrap Table Sample
- + @@ -9,19 +9,24 @@ - + - + - + + + + + + -
center-cell Table SampleCell Alignment Table Sample
Sample Number
00010001 Name 01 Code 1
centered 00020002 Name 02 Code 2
00030003 Name 03 Code 3
0004Name 04This 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.
\ No newline at end of file + diff --git a/doc/snippets/tab-sample-tabledata-colcenter.txt b/doc/snippets/tab-sample-tabledata-colcenter.txt index 39ff638..f3380c5 100644 --- a/doc/snippets/tab-sample-tabledata-colcenter.txt +++ b/doc/snippets/tab-sample-tabledata-colcenter.txt @@ -1,27 +1,27 @@ - - +
col-x-center Table Sample
+ - + - + - + - + -
col-1-top col-2-top col-2-right col-3-top col-3-center Table Sample
Sample NumberSample NameValue Sample Code
0001Name 0142 Code 1
0002Name 02This 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
0003Name 038 Code 3
\ No newline at end of file +