モバイルフレンドリーの観点から修正を実行した。実際はかなり根が深かった。結局、PureDocの改修を含む大掛かりな作業になってしまったのだ。私のサイトは見た目はシンプルだが、実際は結構複雑なことをしている。SIサイトに関しては、かなり難しいことを実験している面がある。SIサイトの難しさは、やはり「レスポンシブデザインで右カラムが上にくる」ということにある。CSSで指定する場合、左右に並べるのは必ずしも左が先でなくても配置できるが、これを上下にする場合は基本的には「先にくるものが上」になる。そのため、SIサイトではサイドバーである右カラムがHTML上は「先に」書かれている。table-cellが使えないということを意味する。高さが一定でない上に、「チェックのボーダー」は親要素の背景になっているため、absolute配置を利用して並べてしまうと、要素の高さが維持されない。両方とも高さが固定でない以上、ネガティブマージンを使う方法も取れない。floatを使う方法が、事実上唯一だと思われた。実際に、この問題は試行錯誤の末、既にfloatを使う方法を用いている。それでもうまくいかない部分があった。基本的にはwidthをまず確保し、そこにpaddingとborder-widthとmarginを足す。全体幅を指定したい要素に関しては、それらを0にした入れ子要素を用意するのが無難だ。100%を指定すると、必然的に親ボックスからはみだすことになる。この時点でコンテンツの幅は親ボックスいっぱいまで確保されていて、その外に足すことになるからだ。ところが、paddingに相対値を指定すると、paddingはwidthに含まれるのが普通。1em;とした時は、ボックスの外に1emを足すことはしない。paddingのボックス相対(主に%)を使用する場合、親ボックスはその要素のようだ。paddingに25%を指定すると、ボックスの内側50%にコンテンツボックスが生成される。paddingは相対値は普通にあるが、marginはレイアウトボックスではあまりない。border-widthに至ってはまずない。そのために、widthの相対値がとても使いにくい。スタティックなピクセル値を自分で計算して書いて、それに対してスケールするという美しくないことになっている。その中にピクセル値に対して曖昧な物理絶対値(特にフォントのポイント指定)を含むのでぐっちゃぐっちゃだ。結局は全てスタティックなピクセル値に書きなおした。#MainContainerはW850+PAD50+MGNautoで950pxボックス#TopPanはwidth838+border6の850pxボックス。HTMLに直接指定されていたPADは除去。MGNは0#SideBarは225pxで左に35pxのMGN。PADは0で、#LeftPageと合わせて850pxボックスつまりカラムの間のボーダーは、サイドバーのMGNが持っているなぜ画像のmax-widthが効かないのか厄介なのが画像だ。画像は既にwidthやheightのボックス相対指定でスケールするようになっている。100%を用いるのだろう。100%が効かない、ということだった。実はGeckoでは親要素がピクセル値を持っていなければ画像のwidth/height系プロパティを無視するのだ。親要素がボックス相対値であっても、その親要素はスタティックなピクセル値ならば問題ない。画像は600pxに対する幅になる。これは、max-*のプロパティでも効く。親ボックスがピクセルで固定されたボックスに入れ子にされていても、max-*プロパティで決定されていると効かない。これがBlinkだと問題ない。100%;を指定すればちゃんと効く。モバイルでGeckoを使っている人は恐らく少数派なので、あまり問題ない、とも考えられる。単純なテストを行うと、そのような問題は出ない。/></p></div></body></html>のようなだ。そこで色々試したのだが、inline-blockの中では画像のwidthは効かない。これはGeckoでは効かないがBlinkでは効くblock要素の中ではfloatされている要素は高さを持たないが、inline-blockの中では持つ。これはGecko/Blink共通ということが分かった。これは明確な仕様にはなっていない。曖昧な部分なのだろう。#UnderContainerを950pxを超える場合はinline-blockに、950px以下ではblockになるようにした。その他の修正Webfontの修正SIではなくReasonSetのほうで使用しているwebフォントのロゴたいぷゴシックだが、OTFのほうがグリフはかなり多いのだが、かなり空白グリフがある。空白グリフというのは結構な問題だ。いうのは、通常、グリフがない文字についてはフォールバックされ、他の代替フォントを使用して表示する。そのため「表示されないから読めない」ということは避けられるのだが、空のグリフが存在していると結局空白を表示してしまうため、文字が表示されないため見えない。空のグリフは削除してしまうのが望ましい。これを問題にしたのは、「精悍」の「悍」の字が出なかったためだ。使用して修正した上で再生成してこの問題を修正した。PureDocの修正PureDocのPuredoc::XHTPureDoc.stdメタメソッドがオプショナルなパラメータを正しく解釈しなかったため、修正した。これはPuredoc::XHTPureDoc.getoptionsメソッドが戻り値をちゃんと指定していなかったためである。若干歴史にも改変を加えたが、ゴミの除去が主だ。項目としてBiographyを加えた。