編集モードでは,自動配置の参考となるように,ガイドを表示することができます.
コントロールパネルの「Guide」にチェックを入れると,兄弟関係と距離を示す青いラインが表示されます.
adminユーザの場合,「Frame」にチェックを入れると,すべてのスプライトの範囲を示す枠が表示されます.兄弟間の枠が重ならず,その間に青い兄弟のラインが表示されていれば,大抵の場合,自動配置はうまく実行されます.
(注意)
兄弟の関係は親子よりも流動的です.弟にとってはもっとも上下方向に近接するスプライトが兄となります.スプライトを保存したときの最近接スプライトは,表示のときには表示環境や周りの親子兄弟の自動配置の結果により変わることがあり,兄弟間の位置関係はこの新たな兄を基準として再現されます.
次の場合のみは必ず保存したときのスプライトを兄として扱います.
・保存のとき,兄弟が重なり合っている場合
・Sibling-TB,BBで,表示のとき,保存したときの兄が弟よりも上方にある場合
・Sibling-BT,TTで,表示のとき,保存したときの兄が弟よりも下方にある場合
スプライトのリスト表示
作成者スタイルシートを利用しないようにしたり,ユーザスタイルシートを用いるなどしてabosolute指定を解除すると,PositLogのスプライトは順序なしリスト(<ul>)中のアイテム(<li>)としての表示に従います.この順序なしリストは,上方に配置されているスプライトから順に並べられています(順序なしリストの順を言うのも変ですが……).また,親子関係がある場合は入れ子のリストとなっています.
absolute配置の場合,とくに要素のボックスの高さが表示環境によって大きく変わるため,自動配置調整は上下方向にのみ行われます.スプライトの高さが変化したためにスプライト同士が意図せず重なりあうことがないように,上下へ移動させます.自動配置調整によって左右方向へのスプライトの移動は行われません.
自動配置調整は,ページの編集時に記録されたスプライトの座標や相互関係についての情報を元に行われます.処理は次の2つの手順に大きく分けられます.
1.配置の記録
ユーザがスプライトを移動,保存,削除したときに,配置の記録が行われます.記録される情報は,各スプライトについて,その配置された座標,上(あるいは下)方向に置かれた兄弟スプライト(同じ親を持つスプライト)との位置関係の型と上下の余白を示す数値,親との位置関係の型と上下の余白を示す数値です.
2.配置の調整
自動配置処理はページがロードされた直後あるいはブラウザの文字サイズが変更されたときに行われます.文字サイズの変更はページ中のid="footer"要素の高さを監視することによって行っています.微妙な文字サイズの変更は検出できない場合がありますが,今後修正予定です.
スプライトは記録されたそれぞれの座標に従って配置された後,親との位置関係が調整されます.最後に,上下方向の兄弟スプライトとの位置関係が調整されます.
Webページは多くの場合,スタイルシートや文字サイズその他の設定によってレイアウトが変化します.PositLogではスプライトごとに自由に配置を定めることができますが,このように自由に配置した場合,レイアウトの変化にともなって文字や絵が重なったりと読みにくい配置になることがあります.このためPositLogはスプライトの配置を自動調整する機構を備えています.
自動調整の様子を簡単に試して確認するには,ブラウザの文字のサイズを変更してみてください.文字が重なって読みにくくならないように,スプライトが自動的に再配置されるのが判ると思います.
以下では自動調整が行われる際のルールについて説明します.詳しい技術的な話も交じっていますので,知らなくても特に問題ないように設計しています(したつもりです)が,レイアウトに細かく凝りたい方は参考にしてください.
PositLogはCSSを用いてスプライト(spriteというクラス名のli要素)の配置を定めています.CSSにおいて要素の配置方式はpositionプロパティによって定められます.
positionプロパティの初期値はstaticであり,とくに指定のない場合,この値が用いられます.おおまかな説明ではありますが,staticの場合,要素はブラウザのウィンドウ内に順序良く詰めて流し込むように配置されます.また,ブラウザのウィンドウサイズや文字のサイズによらず,要素同士が相互の位置関係を保ち,文字や画像が重なって読み辛くなるようなことがないように調整されて配置されます.
一方で,PositLogではスプライトのpositionプロパティをabsoluteに指定しています.absoluteの場合,要素はブラウザ上の任意の位置に配置することができます.ただし,staticの場合のような調整が行われないため,スタイルシートによる行間隔設定の違いやブラウザの文字のサイズ設定次第で文字や画像が重なり合って見づらい表示となることがあります.
absolute配置の場合,とくに要素のボックスの高さが表示環境によって大きく変わるため,あるスプライトの下端と別のスプライトの上端とが重なることがよく起こります.ボックスの高さが変わる理由にはおよそ以下のようなことが考えられます.
・ブラウザごとのデフォルトのスタイルシートによるmarginやpadding,line-height等プロパティの違いによるもの
・ユーザスタイルシートの違いによるもの
・OS,ブラウザごとのフォントの違いによるもの
・ブラウザの文字サイズ設定によるもの
こうした場合の見づらさに対処するため,PositLogではユーザが指定した各スプライトの配置と,スプライト間の位置関係を出来るだけ保ちつつ,見づらい表示とならないように,JavaScriptを用いてスプライトを移動する処理を行っています.