On 12/1/25 15:26, Raymond Toy wrote:
On 12/1/25 3:11 PM, Per Bothner wrote:
On 12/1/25 14:05, Raymond Toy wrote:
When I try this on a simulated iPhone SE in portrait, I get [no wrapping]
I don't think that's what we want.
On Gnome Web (which uses webkitgtk) when the window is too narrow
I get a horizontal scrollbar rather than wrapping. Tolerable
but not ideal.
Oh. I was using Firefox.
My understanding is that until recently "Firefox" on IPhone was
just a wrapper over Apple's WebKit browser engine, due to Apple app
restrictions.
Those restrictions have recently been disallowed, at least in Europe
WebKit-based browsers (which includes Safari, the IPhone browser),
and Gnome Web - formerly Epiphany) are known for being less
current-standards compliant than Firefox or Chrome.
According to https://caniuse.com/flexbox Safari has supported flexbox for a
long time. Not sure what that implies about putting a scrollbar, though.
​
That does not mean it does so correctly. Flexbox is a huge specification,
and there are a lot of features to implement. There may also be genuine
differences in how the spec is interpreted. However, if Chrome and Firefox
agree and WebKit/Safari differs, I would consider the former more likely to be
"correct".
Of course, we still want things to work acceptably on WebKit/Safari.
I think the comments there (provided by Gemini) are really important to keep.
If the CSS is to be included in each emitted html file, then
no, we don't want to keep the comments. If the CSS will be in a separate
.css file, then we can keep the more non-obvious of the comments.
Personally, I dislike the "Lisp style identation" where the amount of
indentation
of overflow lines is based on the length of the initial word/command. For
example,
it makes for different indentation following the "Next:" and "Previous:" lines.
It's ugly, wastes space, and as far as I know no-one else (outside the GNU and
Lisp
communities) does it that way.
Here is your code changed so each overflow line indents a fixed amount.
It seems to work nicely on both Gnome Web and Firefox.
<head>
<meta charset="UTF-8">
<style type="text/css">
.nav-panel {
width: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
}
.nav-entry {
background-color: #f3f4f6;
padding-left: 1em;
text-indent: -1em;
}
.nav-key {
font-weight: bold;
color: #1f2937;
margin-right: 0.25rem;
}
.nav-value {
color: #4b5563;
word-wrap: break-word;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div class="nav-panel">
<span class="nav-entry">
<span class="nav-key">Next:</span>
<span class="nav-value">A SERVE-EVENT Example</span>
</span>
<span class="nav-entry">
<span class="nav-key">Previous:</span>
<span class="nav-value">Using SERVE-EVENT with Unix File
Descriptors</span>
</span>
<span class="nav-entry">
<span class="nav-key">Up:</span>
<span class="nav-value">Event Dispatching with SERVE-EVENT</span>
</span>
<span class="nav-entry">
<span class="nav-key">[Content][Index]</div>
</span>
</div>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
aliquam sapien id risus interdum pretium. Sed pulvinar hendrerit
fermentum. Vivamus nec bibendum libero. Quisque convallis, massa
quis cursus molestie, ante dolor varius odio, sit amet gravida
felis purus ac eros. Etiam porttitor accumsan bibendum. Aenean
convallis commodo commodo. Mauris lobortis sem in massa maximus
mattis. In mattis varius odio eu ultricies. Curabitur dignissim
ornare elit eget fringilla.
</p>
</body>
</html>
--
--Per Bothner
[email protected] http://per.bothner.com/
