alt
画像の属性があります。画像が利用できない場合、画像があるべき場所の 45 倍の角度でテキストを斜めに表示したいと思います。CSSでtransform/rotateプロパティを使ってみたのですが、これも表示画像が傾いてしまいます。
代替テキストのみを傾ける方法はありますか?
alt
テキストは CSS の概念として存在しないため、CSS でこれを行う方法はありません。要素には CSS が適用され、alt
テキストは疑似要素であっても要素を構成しません。img
CSS には、ルールの適用を要素のステータスに依存させる方法はありません。実際には、alt
テキストのレンダリング、およびimg
画像が利用できない場合の要素全体のレンダリングは、ブラウザーによって大きく異なります。
要素を無条件に回転させても (画像が表示されるときに画像も回転することを意味します)、alt
すべてのブラウザーでテキストが期待どおりに動作するとは限りません。(Firefox は画像を回転しますが、alt
テキストは回転しません。)
スクリプトを使用した回避策は、img
要素をalt
テキストで置き換え、回転可能な要素でラップすることです。悪いニュースは、マークアップの各要素にonerror
属性を追加する必要があることです。img
スクリプトでこれを行うことはできません。要素が既に解析されている場合に属性を追加するのは遅すぎるためです。解析時にブラウザも画像のリクエストを送信するためです。また、要素のcomplete
プロパティは、画像のリクエストが失敗したときに設定されるため、使用できません。要素が画像としてレンダリングされるかどうかを JavaScript で直接テストする方法はありません。img
true
img
したがって、たとえば、onerror=altr()
すべてのimg
要素で関数定義を使用します
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);
}
そしてCSSコードで
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);
}
alt
要素で指定されているような特定の寸法を持つボックスにテキストを表示したい場合は、ここで作成された要素のプロパティにimg
それらの寸法を入れるコードを追加する必要があります。style
span