On 12/1/25 13:09, Gavin Smith wrote:
I see with the current output, the output looks like this:
<div class="nav-panel">
<p width="100%">
<span class="nav-button">...</span>*</p>
</div>
where * indicates multiple <span> elements.
In the HTML code you sent you had:
<div class="nav-container">
in place of:
<p width="100%">
You then set CSS rules on .nav-container, most importantly "display: flex;".
Would we need to add a "nav-container" class, perhaps on the <p> element?
Or get rid of the <p> element and change the CSS to use nav-panel/nav-button.
You also had <div class="nav-button"> in place of <span class="nav-button">.
Do you know if this has to be a div or could it stay as a span?
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>
I included my suggested changes for padding-left/text-align (to indent
wrapped lines), and replace gap by column-gap (to avoid excess spacing
when multiple lines are needed).
One might want to replace directives like Next with something like
<span class="nav-kind">Next:</span>
to allow styling of Next: etc.
--
--Per Bothner
[email protected] http://per.bothner.com/
