Rotate Image Alt Text Without Rotating Image

Question

I have alt attributes for my images. When an image is unavailable, I'd like the text to be displayed diagonally at a 45* angle of where the image should be. I've tried using the transform / rotate property in CSS, but this tilts displayed images also.

Is there a way to tilt only the alt text?

Ok, I tried to make a clever answer, but don't have access to a machine with a decent browser. I think this should be possible using the [onerror event](http://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is-not-found). If you override that, you could hide the image and insert a span after with the alt text and rotate that. — , Oct 03 '13 at 05:41

score 2 · Answer 1 · answered Oct 03 '13 at 08:09

There is no way to do this in CSS, because the alt text does not exist as a CSS concept. CSS is applied to elements, and the alt text does not constitute an element, even a pseudo-element. There is no way in CSS to make the application of a rule depend on the status of an img element. And in practice, the rendering of alt texts, and the rendering of an img element as a whole when the image is not available, greatly varies by browser.

Even if you unconditionally rotate the element (meaning that the image is rotated, too, when the image is displayed), the alt text will not behave as desired in all browsers. (Firefox would rotate the image, but not the alt text.)

A workaround, using scripting, would be to replace img elements by their alt texts, wrapped in elements that you can rotate. The bad news is that you would need to add an onerror attribute in each img element in markup. You cannot do this with scripting, since it would be too late to add the attribute when the element has already been parsed, since on parsing, the browser also sends a request for the image. And you cannot use the complete property of an img element, since it gets set to true when a request for the image fails – there is no direct way in JavaScript to test whether an img element is rendered as an image or not.

So you would use, say, onerror=altr() in all of your img elements, with the function definition

function altr(el) {
console.log(el.innerHTML);
  var span = document.createElement('span');
  span.className = 'notLoaded';
  span.innerHTML = el.alt || 'Missing alt';
  el.parentNode.replaceChild(span, el);
}

and with the CSS code

span.notLoaded {
    display: inline-block;
    border: solid thin;
    color:red;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);        
}

If you wish to show the alt text in a box that has some specific dimensions, like those specified in the img element, you would need to add code that puts those dimensions into the style property of the span element created here.

jsfiddle

Is there a way to rotate the image, but not rotate alt, when image is not available? — Marek, Mar 23 '22 at 13:08

Rotate Image Alt Text Without Rotating Image

1 Answers1