-moz-force-broken-image-icon: alt text on height OR width set

[SVNKoch]

before: if height and width is set
after: if height or width is set

Description

moz-force-broken-image-icon specified, that alt text will not be shown if height and width is set. Changed it to an or.
And reworded sentence to make it simpler to read; converted alt to alt.

Motivation

the wiki talks about "has a specified height and width"
but it should be an "or" as showcased by this playground

specifically look at the second to fourth line / image.

Additional details

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/-moz-force-broken-image-icon

Flaws (48)

URL: /en-US/docs/Web/CSS/-moz-force-broken-image-icon
Title: -moz-force-broken-image-icon
Flaw count: 48

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/What_is_CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/Getting_started
  • and 43 more flaws omitted

(comment last updated: 2024-12-30 12:55:06)

[SVNKoch]

preview looks good in my opinion

[bsmth]

Is it not like the following for -moz-force-broken-image-icon: 1 cases:

If an image has no height or width set, the alt text may not be visible.

[bsmth]

For -moz-force-broken-image-icon:

A value of 1 means that the broken image icon is shown even if the image has an alt attribute.
When the value 0 is used, the image will act as usual and only display the alt attribute.

I think the images in your example don't show the alt text because the element is too small: https://codepen.io/bsmth/pen/qEWPqEE

[SVNKoch]

I think the images in your example don't show the alt text because the element is too small

Nope, you are mistaken, see

sources

<h1>no force</h1>
<img class="no-force         " src="x.png" alt="ALT"                            />
<img class="no-force         " src="x.png" alt="ALT" width="50px"               />
<img class="no-force         " src="x.png" alt="ALT"              height="50px" />
<img class="no-force         " src="x.png" alt="ALT" width="50px" height="50px" />
<br>
<img class="no-force         " src="x.png"                                      />
<img class="no-force         " src="x.png"           width="50px"               />
<img class="no-force         " src="x.png"                        height="50px" />
<img class="no-force         " src="x.png"           width="50px" height="50px" />
<br>
<img class="no-force min-size" src="x.png" alt="ALT"                            />
<img class="no-force min-size" src="x.png" alt="ALT" width="50px"               />
<img class="no-force min-size" src="x.png" alt="ALT"              height="50px" />
<img class="no-force min-size" src="x.png" alt="ALT" width="50px" height="50px" />
<br>
<img class="no-force min-size" src="x.png"                                      />
<img class="no-force min-size" src="x.png"           width="50px"               />
<img class="no-force min-size" src="x.png"                        height="50px" />
<img class="no-force min-size" src="x.png"           width="50px" height="50px" />

<h1>with force</h1>
<img class="do-force         " src="x.png" alt="ALT"                            />
<img class="do-force         " src="x.png" alt="ALT" width="50px"               />
<img class="do-force         " src="x.png" alt="ALT"              height="50px" />
<img class="do-force         " src="x.png" alt="ALT" width="50px" height="50px" />
<br>
<img class="do-force         " src="x.png"                                      />
<img class="do-force         " src="x.png"           width="50px"               />
<img class="do-force         " src="x.png"                        height="50px" />
<img class="do-force         " src="x.png"           width="50px" height="50px" />
<br>
<img class="do-force min-width" src="x.png" alt="ALT"                            />
<img class="do-force min-width" src="x.png" alt="ALT" width="50px"               />
<img class="do-force min-width" src="x.png" alt="ALT"              height="50px" />
<img class="do-force min-width" src="x.png" alt="ALT" width="50px" height="50px" />
<br>
<img class="do-force min-width" src="x.png"                                      />
<img class="do-force min-width" src="x.png"           width="50px"               />
<img class="do-force min-width" src="x.png"                        height="50px" />
<img class="do-force min-width" src="x.png"           width="50px" height="50px" />
<br>
<img class="do-force min-height" src="x.png" alt="ALT"                            />
<img class="do-force min-height" src="x.png" alt="ALT" width="50px"               />
<img class="do-force min-height" src="x.png" alt="ALT"              height="50px" />
<img class="do-force min-height" src="x.png" alt="ALT" width="50px" height="50px" />
<br>
<img class="do-force min-height" src="x.png"                                      />
<img class="do-force min-height" src="x.png"           width="50px"               />
<img class="do-force min-height" src="x.png"                        height="50px" />
<img class="do-force min-height" src="x.png"           width="50px" height="50px" />
<br>
<img class="do-force min-width min-height" src="x.png" alt="ALT"                            />
<img class="do-force min-width min-height" src="x.png" alt="ALT" width="50px"               />
<img class="do-force min-width min-height" src="x.png" alt="ALT"              height="50px" />
<img class="do-force min-width min-height" src="x.png" alt="ALT" width="50px" height="50px" />
<br>
<img class="do-force min-width min-height" src="x.png"                                      />
<img class="do-force min-width min-height" src="x.png"           width="50px"               />
<img class="do-force min-width min-height" src="x.png"                        height="50px" />
<img class="do-force min-width min-height" src="x.png"           width="50px" height="50px" />

img { margin: 1rem; }
.min-width { min-width: 100px; }
.min-height { min-height: 100px; }
.do-force { -moz-force-broken-image-icon: 1; }
.no-force { -moz-force-broken-image-icon: 0; }

as we can see, the alt text is showing for elements which have (an alt text and) width or height specified (either explicitly or via min-width /-height or both).

PS: but I think the statement is correct that the alt text only shows when the (broken) image is large enough. This is why it is coded such that it is only shown when some size is specified, I would guess.

[bsmth]

I just had a read through again, and I don't think it's right. Let's recap:

• If the image doesn't load and there's alt text, the alt text is displayed inline instead of the image:

  <img src="broken-image.png" alt="Display me instead" />

• If the image doesn't load and there's alt text, when you set -moz-force-broken-image-icon: 1, you'll see the broken image icon:

  <img src="alt.png" alt="Broken image link" style="-moz-force-broken-image-icon: 1"/>

The width only affects whether there is room to see the text in the second case, so I think the original is more correct.

You can have a look at the preview here:

https://pr37261.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/-moz-force-broken-image-icon#css

Where:

1. -moz-force-broken-image-icon: 1; -> applied
2. "the image has a specified height or width" -> true (both)
3. "the alt attribute will not be displayed" -> not correct

I think a better note might be that the alt text may not be visible if the image width and height are not large enough. Do you agree?

[bsmth]

Suggested change

	> If `-moz-force-broken-image-icon` is set to `1`, the `alt` attribute will not be displayed if the image has a specified height or width.
	> Alt text may not be visible if `-moz-force-broken-image-icon` is set to `1` and an image has no (or too small) `height` or `width` set.