Editorial: Pivots the tables within clause 16.2.1.5.4 #3342
Conversation
gesa
force-pushed
the
pivot-some-tables
branch
2 times, most recently
from
ff764db
to
78bc529
Compare
| </tr> | ||
| <tr> | ||
| <th>[[PendingAsyncDependencies]]</th> | ||
| <td>1 (_B_)</td> | ||
| <th>0</th> |
There was a problem hiding this comment.
Is this a <th> on purpose? This is what it looks like on the spec.
There was a problem hiding this comment.
seems like a typo (weird that the ]] isn't sticking together on the same line, btw)
There was a problem hiding this comment.
@ljharb outside my focus, but fwiw that’s what it looks like in firefox. Here’s some examples of table 45 in 16.2.1.5.4
Safari:
Chrome:
Firefox:
There was a problem hiding this comment.
Yeah that th is for sure a typo.
|
Now that I see the "Field / Module" test, I don't actually like how it looks. What do people think of the following: <emu-table id="table-module-graph-cycle-async-fields-7" caption="Module fields after module _C_ finishes with an error">
<table>
<col>
<col span="2"></colgroup>
<thead>
<tr>
<td></td>
<th colspan="2" scope="colgroup">Module</th>
</tr>
<tr>
<td></td>
<th scope="col">_A_</th>
<th scope="col">_C_</th>
</tr>
</thead>
<tr>
<th scope="row">[[DFSIndex]]</th>
<td>0</td>
<td>3</td>
</tr>
<tr>
<th scope="row">[[DFSAncestorIndex]]</th>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th scope="row">[[Status]]</th>
<td>~evaluated~</td>
<td>~evaluated~</td>
</tr>
<tr>
<th scope="row">[[AsyncEvaluation]]</th>
<td>*true*</td>
<td>*true*</td>
</tr>
<tr>
<th scope="row">[[AsyncParentModules]]</th>
<td>« »</td>
<td>« _A_ »</td>
</tr>
<tr>
<th scope="row">[[PendingAsyncDependencies]]</th>
<td>1 (_B_)</td>
<th>0</th>
</tr>
<tr>
<th scope="row">[[EvaluationError]]</th>
<td>~empty~</td>
<td>_C_'s evaluation error</td>
</tr>
</table>
</emu-table>
|
There was a problem hiding this comment.
I've reviewed the pivoted tables for correctness and everything looks good.
Some comments on formatting:
- I don't like how "Fields / Modules" looks after all. See comment for an alternative.
- The field names should be left-aligned instead of centered.
- The
<th>tags should havescope="row"orscope="col".
|
@syg's suggestion works for me. Alternatively, something like this:
code from chatgpt<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
.corner-cell {
position: relative;
height: 50px; /* Adjust as needed */
width: 100px; /* Adjust as needed */
}
.corner-cell .slash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom left, transparent calc(50% - 1px), black, transparent calc(50% + 1px));
}
.corner-cell .fields {
position: absolute;
bottom: 2px;
left: 5px;
z-index: 1;
background-color: white; /* Optional, to improve readability */
}
.corner-cell .programs {
position: absolute;
top: 2px;
right: 5px;
z-index: 1;
background-color: white; /* Optional, to improve readability */
}
</style>
</head>
<body>
<table>
<tr>
<th class="corner-cell">
<div class="slash"></div>
<span class="fields">Fields</span>
<span class="programs">Modules</span>
</th>
<th>A</th>
<th>B</th>
<!-- Add more columns as needed -->
</tr>
<tr>
<th>[[DFSIndex]]</th>
<td>data1</td>
<td>data2</td>
<!-- Add more cells as needed -->
</tr>
<tr>
<th>[[DFSAncestorIndex]]</th>
<td>data3</td>
<td>data4</td>
<!-- Add more cells as needed -->
</tr>
<!-- Add more rows as needed -->
</table>
</body>
</html> |
|
@bakkot's snippet is my preference. |
|
@bakkot I'm fine with something like that, but the padding needs to be adjusted so we don't have the labels shoved in the corners. |
|
Added the slashed corner header cell. It looks like this:
|
|
Looks great. |
|
@syg Can you take a look at the screenshot I posted and let us know if this is ready to merge? |
michaelficarra
added
the
ready to merge
This provides improved readability while maintaining the same information.
ljharb
force-pushed
the
pivot-some-tables
branch
from
8c2a0be
to
e0c4006
Compare
This provides improved readability while maintaining the same information.
I will also be making these changes to the ever-so-slightly different 2024 branch, but i will likely not open a pr on that branch as that work’s mostly for me.