On 12/1/25 1:43 PM, Per Bothner wrote:
In my testing, I changed them to <span>. I don't think it matters as
long as
the CSS rules are active, but if CSS is inactive or modified, I think
using <span> would be preferable.
What we need to make any changes is minimal changes to the existing
output
that allow adding CSS rules to get the wrapping behaviour in your
screenshots.
It's hard to tell what these changes would be from your emails as
they include
other formatting changes involving colour and explicitly specified
spacing
which may not be essential to the desired flow and breaking behaviour.
The following seems to work pretty well:
<style type="text/css">
.nav-panel {
display: flex;
flex-wrap: wrap;
column-gap: 5px;
}
.nav-button {
flex-basis: max-content;
flex-grow: 0;
flex-shrink: 1;
white-space: normal;
text-align: left;
padding-left: 1em;
text-indent: -1em;
}
</style>
<body>
<div class="nav-panel">
<span class="nav-button">
Next: <a href="A-SERVE_002dEVENT-Example.html" accesskey="n"
rel="next">A SERVE-EVENT Example</a>,
</span>
<span class="nav-button">
Previous: <a
href="Using-SERVE_002dEVENT-with-Unix-File-Descriptors.html"
accesskey="p" rel="prev">Using SERVE-EVENT with Unix File
Descriptors</a>,
</span>
<span class="nav-button">
Up: <a href="Event-Dispatching-with-SERVE_002dEVENT.html"
accesskey="u" rel="up">Event Dispatching with
SERVE-EVENT</a>
</span>
<span class="nav-button">
[<a href="index.html#SEC_Contents" title="Table of contents"
rel="contents">Contents</a>][<a href="Concept-Index.html"
title="Index"
rel="index">Index</a>]
</span>
</div>
</body>
When I try this on a simulated iPhone SE in portrait, I get:
I don't think that's what we want.
One might want to replace directives like Next with something like
<span class="nav-kind">Next:</span>
to allow styling of Next: etc.
Yes, I would like that. I think a bold "Next:" looks nice. With this
styling, I think removing the comma between each button would be
appropriate too.
I will try to minimize code from the last example I sent and send an
update. I'll use span instead of div too.
​
