From Newsgroup: alt.html

I want to include in such html table entries

<td valign="top" bgcolor="#99ffff">
<img src="C%5E_0412.png">
</td>


the equivalent of what in bash is

CROP_GEOMETRY="123x222+28+310"

so that only a smaller box of the image appears.

All suggestions appreciated
(I do very little HTML and prefer in-line style to CSS pages)


--- Synchronet 3.21b-Linux NewsLink 1.2

From Newsgroup: alt.html

On Wed, 28 Jan 2026 19:47:02 -0500, riverain wrote:

I want to include in such html table entries

<td valign="top" bgcolor="#99ffff">
<img src="C%5E_0412.png">
</td>

the equivalent of what in bash is

CROP_GEOMETRY="123x222+28+310"

so that only a smaller box of the image appears.

All suggestions appreciated
(I do very little HTML and prefer in-line style to CSS pages)

<td> element is troublesome and unreliable to specifically and consistenly
be resized.

Wrap the image with <div> first, and resize the <div> instead of <td> to constraints the content size.


<!-- crop width+height -->
<div clas=image-cropper style="
width: 150px;
height: 80px;
overflow: hidden;
">
<!-- crop coordinate as negative numbers. X then Y. -->
<img src="/imgs/test.png" style="
object-position: -20px -20px;
">
</div>
</td>

Note: crop coordinate and size, are based on the rendered <img> element
size. Not the image size which is defined in the image file itself.
--- Synchronet 3.21b-Linux NewsLink 1.2

From Newsgroup: alt.html

On 1/29/26 1:28 AM, JJ wrote:

On Wed, 28 Jan 2026 19:47:02 -0500, riverain wrote:

I want to include in such html table entries

<td valign="top" bgcolor="#99ffff">
<img src="C%5E_0412.png">
</td>

the equivalent of what in bash is

CROP_GEOMETRY="123x222+28+310"

so that only a smaller box of the image appears.

All suggestions appreciated
(I do very little HTML and prefer in-line style to CSS pages)

<td> element is troublesome and unreliable to specifically and consistenly
be resized.

Wrap the image with <div> first, and resize the <div> instead of <td> to constraints the content size.

<!-- crop width+height -->
<div clas=image-cropper style="
width: 150px;
height: 80px;
overflow: hidden;
">
<!-- crop coordinate as negative numbers. X then Y. -->
<img src="/imgs/test.png" style="
object-position: -20px -20px;
">
</div>
</td>

Note: crop coordinate and size, are based on the rendered <img> element
size. Not the image size which is defined in the image file itself.

Thanks very much! Without really understanding the offset pixels
mechanism I managed to get the desired result :-)

The original small image (and desired crop size): 123x222
The new larger image to crop: 180x532

The code that did it:

<td bgcolor="#bbbbbb">
<div class=image-cropper style=
"width: 123px; height: 222px; overflow: hidden;">
<img src="/0/data/music/atelier/DGCFAD/chords/diags/A_0304.png"
style="object-position: -28px -310px;">
</div>
</td>

In the above I 'think' I slew the image up -310 pixels and left -28
which gives me the bottom 222 (532-310) and center 123 (222-2*28) of the
new larger image.

Much appreciated.

--- Synchronet 3.21b-Linux NewsLink 1.2

From Newsgroup: alt.html

On 1/29/26 1:28 AM, JJ wrote:

On Wed, 28 Jan 2026 19:47:02 -0500, riverain wrote:

I want to include in such html table entries

<td valign="top" bgcolor="#99ffff">
<img src="C%5E_0412.png">
</td>

the equivalent of what in bash is

CROP_GEOMETRY="123x222+28+310"

so that only a smaller box of the image appears.

All suggestions appreciated
(I do very little HTML and prefer in-line style to CSS pages)

<td> element is troublesome and unreliable to specifically and consistenly
be resized.

Wrap the image with <div> first, and resize the <div> instead of <td> to constraints the content size.

<!-- crop width+height -->
<div clas=image-cropper style="
width: 150px;
height: 80px;
overflow: hidden;
">
<!-- crop coordinate as negative numbers. X then Y. -->
<img src="/imgs/test.png" style="
object-position: -20px -20px;
">
</div>
</td>

Note: crop coordinate and size, are based on the rendered <img> element
size. Not the image size which is defined in the image file itself.

I have made this LAYOUT work for about 300 guitar chord
diagrams in an html table (OS is OpenSuse Tumbleweed)

<!-- D#maj7rUi3|u1_0601 -->
<td valign="top" bgcolor="#ffbbbb">
<div class="image-cropper" style="width: 123px;
height: 222px; overflow: hidden;">
<img src="diags/D%23maj7rUi3|u1_0601"
style="object-position: -28px -310px;">
</div>
</td>

the image for the above EXISTS at exactly THE shown URL

diags/D#maj7rUi3|u1_0601.png

but is the only one out of 300 that does NOT show in
the browser. Clicking on the tiny icon to copy the
link I get one of these, depending on browser used
NEITHER of which works:


diags/D%23maj7rUi3|u1_0601
diags/D%23maj7%E2%81%8B3%C3%971_0601.png

The fix is in Mozilla Seamonkey Composer, if I browse
for and load the file in there it changes the URL to

diags/D%237%E2%81%8B3%C3%971_0601.png

which does work!

But because Seamonkey makes a total mess of my nicely
formatted source I then have to make that change in
a text editor (I had loaded a copy into Composer).

What gives here?

Why all this footwork, Are most browsers not capable
of translating realworld URL's 'on the fly'?

TIA



--- Synchronet 3.21b-Linux NewsLink 1.2

From Newsgroup: alt.html

On Mon, 2 Feb 2026 09:57:33 -0500, riverain wrote:

I have made this LAYOUT work for about 300 guitar chord
diagrams in an html table (OS is OpenSuse Tumbleweed)

<!-- D#maj7rUi3|u1_0601 -->
<td valign="top" bgcolor="#ffbbbb">
<div class="image-cropper" style="width: 123px;
height: 222px; overflow: hidden;">
<img src="diags/D%23maj7rUi3|u1_0601"
style="object-position: -28px -310px;">
</div>
</td>

the image for the above EXISTS at exactly THE shown URL

diags/D#maj7rUi3|u1_0601.png

but is the only one out of 300 that does NOT show in
the browser. Clicking on the tiny icon to copy the
link I get one of these, depending on browser used
NEITHER of which works:

diags/D%23maj7rUi3|u1_0601
diags/D%23maj7%E2%81%8B3%C3%971_0601.png

The fix is in Mozilla Seamonkey Composer, if I browse
for and load the file in there it changes the URL to

diags/D%237%E2%81%8B3%C3%971_0601.png

which does work!

But because Seamonkey makes a total mess of my nicely
formatted source I then have to make that change in
a text editor (I had loaded a copy into Composer).

What gives here?

Why all this footwork, Are most browsers not capable
of translating realworld URL's 'on the fly'?

TIA

You have inconsistency in your explanation.

In you HTML image tag you only specify "diags/D%23maj7rUi3|u1_0601" without the
`.png` file extension.

The image file is supposedly "D#maj7rUi3|u1_0601.png", but in SeaMonkey, you tested with "D#7rUi3|u1_0601.png" file.

So, it's difficult or even impossible to accurately find the problem.

Make sure the HTML is saved using UTF-8 encoding. Especially if you want the HTML file to store Unicode characters such as `rUi` and `|u` without URI encoding them to `%E2%81%8B` and `%C3%97`. On Firefox press CTRL+I to see
what encoding is seen by the browser. On Chome/ium, you'd have to type in `document.charset` into the browser console to get the same information.
--- Synchronet 3.21b-Linux NewsLink 1.2