davsclaus commented on PR #1740:
URL: https://github.com/apache/camel-website/pull/1740#issuecomment-5635844837
Thanks for 2407cd34 @ammachado, the wider grid is a big step. I rendered the
Main page (`components/4.22.x/others/main.html`) headlessly in Chrome and
measured the first row of the Camel Main options table, so here is where it
stands and what is still missing. Everything below is measured against your
built `site-940f27fb37.css`.
| Version | Viewport | Article width | Name / Description / Default / Type |
Row height |
|---|---|---|---|---|
| Preview before 2407cd34 | 2400 | 912 | 62 / 430 / 278 / 220 | 382 |
| 2407cd34 | 2400 | 1372 | 145 / 682 / 287 / 220 | 127 |
| 2407cd34 | 1440 | 732 | 131 / 430 / 278 / 220 | 153 |
| 2407cd34 + the two changes below | 2400 | 1372 | 236 / 706 / 172 / 220 |
102 |
| 2407cd34 + the two changes below | 1440 | 732 | 220 / 311 / 152 / 220 |
178 |
| Current live site, for reference | 2400 | 1366 | 333 / 537 / 260 / 201 |
92 |
**What is still wrong.** The Name column is 145px on a 2400px monitor and
names render as `camel.-main.addition-alSensitive-Keywords`. The cause is `.doc
{ hyphens: auto }` in `doc.css`: it is inherited into the cell, so Chrome
treats every syllable of a property name as a break opportunity when it
computes the column's min-content width, and hands the column almost nothing.
Switching to `overflow-wrap: break-word` cannot help while hyphenation is on.
The Default column is stuck at ~280px for the same family of reason: values
like `classpath:camel/,classpath:camel-template/,classpath:camel-rest/*` have
no break points, so the browser widens the column to fit them and the space
comes out of Description.
**Two changes fix it, and they only work together.** With `hyphens: none`
alone the Name column becomes 510px (the longest name, unbroken) and the table
overflows at every viewport; the script below is what gives it sane break
points again.
1. In `antora-ui-camel/src/css/doc.css`, on top of your current rule:
```css
/* The first column usually holds a property name. Floor its width so it
cannot
collapse to a few characters per line when the table is under pressure
(the
wrapper scrolls instead) and never auto-hyphenate inside an identifier.
11-table-breaks.js inserts soft break points after dots and before
camel-case
humps, so with break-word a long name wraps there and nowhere else. */
.doc table.tableblock tbody tr td:first-child {
min-width: calc(220 / var(--rem-base) * 1rem);
overflow-wrap: break-word;
hyphens: none;
font-weight: 700;
}
/* Pages that write the property name as `code` (e.g. OpenTelemetry) render
it the
same as the generated option tables, which use bold text, instead of as a
chip.
This is the inconsistency @claudio4j reported above. */
.doc table.tableblock tbody tr td:first-child p code {
background: none;
border-radius: 0;
color: inherit;
font: inherit;
padding: 0;
}
```
2. New file `antora-ui-camel/src/js/11-table-breaks.js` (passes the bundle's
eslint, `yarn build` in `antora-ui-camel` picks it up and regenerates
`public/_/js/site-*.js` and the rev manifests):
```js
;(function () {
'use strict'
// Option tables hold long single tokens with no natural break points:
// property names such as
camel.main.streamCachingRemoveSpoolDirectoryWhenStopping,
// fully qualified class names, classpath lists. Without break points the
// browser either widens that column to fit the token, squeezing the
// Description column, or, once the table is under pressure, breaks the
token
// one character per line. This inserts <wbr> after . , / : in any token of
// MIN_TOKEN characters or more, and before each camel-case hump in the
first
// column, so a long token wraps at a sensible place first. The page is
still
// correct if this never runs; doc.css keeps a floor on the first column.
var MIN_TOKEN = 20
var SEPARATOR = /([.,/:])/
var HUMP = /([a-z0-9])(?=[A-Z])/g
var HAS_HUMP = /[a-z0-9][A-Z]/
var breakToken = function (token, firstColumn, fragment) {
token.split(SEPARATOR).forEach(function (part) {
if (!part) return
if (SEPARATOR.test(part) && part.length === 1) {
fragment.appendChild(document.createTextNode(part))
fragment.appendChild(document.createElement('wbr'))
return
}
if (!firstColumn) {
fragment.appendChild(document.createTextNode(part))
return
}
part.split(HUMP).forEach(function (hump, i, humps) {
if (!hump) return
fragment.appendChild(document.createTextNode(hump))
if (i < humps.length - 1)
fragment.appendChild(document.createElement('wbr'))
})
})
}
var breakTextNode = function (node, firstColumn) {
var text = node.nodeValue
if (!new RegExp('[^\\s]{' + MIN_TOKEN + ',}').test(text)) return
var fragment = document.createDocumentFragment()
text.split(/(\s+)/).forEach(function (token) {
if (token.length >= MIN_TOKEN && (SEPARATOR.test(token) ||
(firstColumn && HAS_HUMP.test(token)))) {
breakToken(token, firstColumn, fragment)
} else if (token) {
fragment.appendChild(document.createTextNode(token))
}
})
node.parentNode.replaceChild(fragment, node)
}
;[].slice.call(document.querySelectorAll('.doc table.tableblock
td')).forEach(function (cell) {
var firstColumn = !cell.previousElementSibling
var walker = document.createTreeWalker(cell, window.NodeFilter.SHOW_TEXT)
var nodes = []
while (walker.nextNode()) {
if (!walker.currentNode.parentNode.closest('pre'))
nodes.push(walker.currentNode)
}
nodes.forEach(function (node) {
breakTextNode(node, firstColumn)
})
})
})()
```
With both in place, names wrap as `camel.main.additionalSensitive` /
`Keywords` instead of mid-syllable, the classpath defaults wrap after each `/`
or `,` and the Default column shrinks to ~170px, and the Description column
gets everything that frees up. If you would rather the Name column stay on one
line more often on wide screens, keeping a `width: 22%` hint on that cell
together with the rules above gets it to ~314px at 2400px in my measurements.
Optional and separate: `hyphens: auto` on all of `.doc` also produces
`spe-cific` and `in-stances` inside table cells; scoping it to prose paragraphs
outside tables reads cleaner. And longer term, the reason the upstream
`cols="2,5,^1,2"` hints never reach the browser is
`extensions/inline-styles.js`, which strips every `style` attribute because the
site CSP forbids inline styles. Converting `col` widths to classes there would
let upstream steer these tables, but that is outside this PR.
Measurements and the patch were produced with Claude Code, so feel free to
hand this comment to your assistant as is.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
