適用 (対象)
クライアントサイドスクリプティング
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.4: テキストのサイズ変更 (書かれていない達成方法を満たす手段として十分)
- 達成基準 1.4.8: 視覚的提示 (G146: リキッドレイアウトを使用するの達成方法として十分)
- 達成基準 1.4.10: リフロー (十分な達成方法)
解説
この達成方法の目的は、文字サイズが拡大縮小されるのに従って、適切に拡大縮小する方法で要素のサイズ及びポジションを計算することである。
ここに要素のサイズとポジションを決める JavaScript の四つのプロパティがある:
- offsetHeight (ピクセルでの要素の高さ)
- offsetWidth (ピクセルでの要素の幅)
- offsetLeft (ピクセルでの親要素 (offsetParent) の左からの距離)
- offsetTop (ピクセルでの親要素 (offsetParent) の上からの距離)
offsetHeight や offsetWidth を用いて高さや幅を定めることは簡単である、しかし、オブジェクトの左とトップの位置を絶対配置の値として定める時、親要素を考える必要がある。下記において、calculatePosition 関数は、要素におけるすべての親ノードの最終的な値が決定するまで繰り返されている。その関数は objElement (当該の要素の名前) とオフセットプロパティ (offsetLeft 又は offsetTop ) の二つの引数を取っている。
事例
例 1
Javascript の関数:
function calculatePosition(objElement, strOffset)
{
var iOffset = 0;
if (objElement.offsetParent)
{
do
{
iOffset += objElement[strOffset];
objElement = objElement.offsetParent;
} while (objElement);
}
return iOffset;
}
次の事例は、上の関数がオブジェクトを、参照オブジェクトの下、かつ、左から同じ距離に配置するために用いられていることを示している:
// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');
objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px';
参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
「MSDN: Fix the Box Instead of Thinking Outside It」はリソースがリダイレクトされているが適切に処理されていない。代わりに、MDN の HTMLElement.offsetHeight、HTMLElement.offsetWidth、HTMLElement.offsetLeft、HTMLElement.offsetTop をそれぞれ参照できる。
検証
手順
- テキストサイズの変更とともにテキストコンテナのサイズを調整するように設計されているページを開く。
- ブラウザのテキストサイズ調節を使って 200% のサイズまで大きくする。(ズーム機能は使用しない)
- テキストコンテナのサイズがテキストサイズに合わせて調整されることを確認する。
- テキストサイズを大きくした結果、どのテキストも「切り取られ」たり、見えなくなっていたりしないことを確認する。
期待される結果
- #3 及び #4 の結果が真である。