Description
Audit supplied nonempty whitespace-tokenized grid template area rows for rectangular named regions; dot means empty, not a complete CSS string/token parser.
CSS combines token syntax, property-specific value rules and layout/cascade processing. These are separate layers: splitting a declaration does not establish that its value is valid, and arithmetic on resolved lengths does not perform browser layout. Each tool here handles an explicit numeric representation or a stated lexical subset.
Audit supplied nonempty whitespace-tokenized grid template area rows for rectangular named regions; dot means empty, not a complete CSS string/token parser.
When to use this tool
Use this tool to audit supplied nonempty whitespace-tokenized grid template area rows for rectangular named regions; dot means empty, not a complete CSS string/token parser.
How to use the tool and how it works
- Enter rows using the input definitions below.
- Run the operation. Resolve malformed-input errors before interpreting the result.
- Read result.areas. Interpret signs, units, ordering and null values using the rules below.
Split nonempty equal-width rows on whitespace. Accept a single dot for empty cells or restricted ASCII area names. In first-appearance order find each name’s bounding cell rectangle and test occurrence count = width×height.1, 2
| Input field | Meaning and units | Accepted input |
|---|---|---|
| rows | Nonempty equal-width whitespace-separated area-name rows; a single dot denotes an empty cell. | Dense list of at most 128 strings, each at most 8,192 UTF-16 code units. |
| Output field | Interpretation |
|---|---|
| result | Object containing the fields below. |
| result.areas | First-seen area records with cell origin, dimensions and rectangular flag. |
{
"input": {
"rows": [
"a a .",
"a a b"
]
},
"output": {
"result": {
"areas": [
{
"name": "a",
"x": 0,
"y": 0,
"width": 2,
"height": 2,
"rectangular": true
},
{
"name": "b",
"x": 2,
"y": 1,
"width": 1,
"height": 1,
"rectangular": true
}
]
}
}
}Limitations and assumptions
- The supplied row strings are a restricted token model, not full CSS string tokenization; malformed shape/name input errors differ from a valid nonrectangular area result.
- Lengths and times must already be resolved to consistent numeric units. Lexical helpers intentionally support smaller grammars than a full browser CSS parser; malformed supported-subset input causes an error.
- Every declared top-level input is required and unknown fields are rejected. Ordinary strings are limited to 8,192 UTF-16 code units and lists to 128 entries, with tighter operation-specific bounds where stated. JSON text has bounded nesting and node counts.
- Numeric outputs must be finite and within the absolute safe-integer magnitude; exact larger integers use decimal text. Source positions are zero-based UTF-16 offsets and span ends are exclusive unless a different convention is explicitly stated.
Alternative or Complementary methods
Use a full CSS parser or browser style/layout APIs when escape handling, error recovery, computed styles or the full cascade matter. These tools expose focused transformations and audits of supplied data.
References
Similar or alternative tools
- CSS Grid Line Span Endpoint Resolver
Resolve an explicitly numeric grid line plus a positive numeric span in a supplied direction; excludes named lines, auto placement and negative end-relative line resolution.
- CSS Animation List Slot Pairing
Pair explicit animation names with cyclic duration/delay lists; no shorthand parsing, timing interpolation or special all/none expansion.