Member Avatar for godeny

Hello,

i have some inline images (keyboard keys) in a table cell near each other. Another cell in the row may be very long - fitting into several lines - so the browsers try to wrap every cell. Not using XHTML DTD everything is o.k - the two keyboard key images remain near each other. Switching to XHTML Firefox, Safari and Opera wraps the line between the two images (IE7 not).

As this is a dynamic content, generated from a wiki-like syntax, i am looking for a solution without generally disabling word wrapping in the table cells. Normal text should wrap, only consecutive <IMG> tags should remain always together (as it is the case without the XHTML DTD).

Placing a <nobr> between the images (placing <nobr> before or after all inline images - this is generated contents) solves the problem, but <nobr> is not an "official" tag.

Defining a style for the inline images with display: inline does not help.

Neither helps placing <SPAN> around each images. Placing a <SPAN> around the image groups is something i want to avoid, as that is not an easy step during the generation.

Any ideas to solve this XHTML-conform ?

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<head>
<style type='text/css'>
html,body {
  height: 100%;
  background: #EEE;
  margin: 0;
  padding: 0;
}

img {
  border: 0; 
  display: inline;
}

.spc {
  vertical-align: middle;
}

.td0 {
  vertical-align: top;
}

.tdr {
  vertical-align: top;
  text-align: right;
}

</style>
</head>
<body>
<table cellspacing='0' cellpadding='3' border='0' style='width:100%'>
  <tr>
    <td class='tdr'><img src='k24_ctrl.gif' class='spc'><img src='k24_d.gif' class='spc'></td>
    <td class='td0'>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</td>
  </tr>
</table>
</body>
</html>
  • 2 Contributors
  • 3 Replies
  • 191 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Short answer: keep runs of inline <img> tags together by giving those runs a no-wrap container (best), or—if altering generation is hard—insert a non‑breaking space or wrap them at runtime with a tiny script. 's symptoms and 's float suggestion match common traps: floats change flow (images drop/stack) and width/height stabilise layout but don't stop line breaks.

Generator-side (best, XHTML‑clean)

  • Wrap consecutive images in a single inline container and prevent wrapping with CSS.
/* server-side regex (PCRE) example: wrap runs of 2+ images */
search:  /((?:\s*<img\b[^>]*>){2,})/gi
replace: '<span class="kbd-keys">$1</span>'

/* CSS */
.kbd-keys { white-space: nowrap; display: inline-block; vertical-align: middle; }

This keeps the keys together while leaving normal table-cell wrapping alone; white-space: nowrap is the rule that prevents line breaks. white-space docs. (developer.mozilla.org)

Client-side (no generator change)

  • Insert a non‑breaking space before adjacent images or wrap runs after DOM load:
document.querySelectorAll('td.tdr img + img')
  .forEach(img => img.insertAdjacentText('beforebegin', '\u00A0'));

insertAdjacentText() is a compact, safe way to add a text node (NBSP) so browsers won’t break between the images. insertAdjacentText docs. (developer.mozilla.org)

Progressive CSS-only (modern)

  • If modern browser support is acceptable, detect parents with adjacent images and set nowrap:
td:has(img + img) { white-space: nowrap; }

:has() lets CSS select the parent that contains adjacent images; support is recent—use as enhancement with fallbacks. MDN :has() · Can I use :has(). (developer.mozilla.org)

Avoid trying to inject content with ::before/::after on img (pseudo-elements are not guaranteed for replaced elements like <img>). ::before notes. (developer.mozilla.org)

Recommendation order: fix generation → small JS patch → :has() progressive enhancement → last resort <nobr> (legacy).

Recommended Answers

All 3 Replies

Member Avatar for ko ko

Float your images. Put your images' attributes 'width' and 'height'.
Example:

<img src='k24_ctrl.gif' width="-" height="-" class='spc'>

And css like that:

img.spc {
      float: left;
     }
Member Avatar for godeny

Float your images. Put your images' attributes 'width' and 'height'.

Sorry, that does not functioning.
The second picture will be placed below the first - and the table cell remains narrow. The long text in the other table column forces the browser to make that column as wide as possible (and additionally aligns the pictures to the left of the table cell, when there is no long line in the other table column, but i would like to align the left column to right).

If there would be additional text before and after the keyboard key images, floating the images would be surely no good solution: the images should remain inside the normal text flow.

Zoltan

Edited by godeny because: n/a
Member Avatar for ko ko

Let me see your file, the code can't show me completely and I can't see your image. And type attributes' values with double quotes, because you used strict mode. And the image attribute width and height were still needed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.