Skip to content

テクニック SCR34:テキストサイズに応じて拡大縮小するように、サイズ及びポジションを定める

このテクニックについて

このテクニックは、次に関連する:

このテクニックは、クライアントサイドスクリプティングに適用される。

解説

このテクニックの目的は、文字サイズが拡大縮小されるのに従って、適切に拡大縮小する方法で要素のサイズ及びポジションを計算することである。

ここに要素のサイズとポジションを決める JavaScript の四つのプロパティがある:

  • offsetHeight (ピクセルでの要素の高さ)
  • offsetWidth (ピクセルでの要素の幅)
  • offsetLeft (ピクセルでの親要素 (offsetParent) の左からの距離)
  • offsetTop (ピクセルでの親要素 (offsetParent) の上からの距離)

offsetHeight や offsetWidth を用いて高さや幅を定めることは簡単である、しかし、オブジェクトの左とトップの位置を絶対配置の値として定める時、親要素を考える必要がある。下記において、calculatePosition 関数は、要素におけるすべての親ノードの最終的な値が決定するまで繰り返されている。その関数は objElement (当該の要素の名前) とオフセットプロパティ (offsetLeft 又は offsetTop) の二つの引数を取っている。

事例

事例 1: テキストサイズに応じて適切に拡大縮小されるように、要素のサイズ及び位置を算出する

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';

検証

手順

  1. テキストサイズの変更とともにテキストコンテナのサイズを調整するように設計されているページを開く。
  2. ブラウザのテキストサイズ調節を使って 200% のサイズまで大きくする。(ズーム機能は使用しない)
  3. テキストコンテナのサイズがテキストサイズに合わせて調整されることを確認する。
  4. テキストサイズを大きくした結果、どのテキストも「切り取られ」たり、見えなくなっていたりしないことを確認する。

期待される結果

  • チェック 3 及び 4 が真である。
Back to Top