タグ

ブックマーク / webtech-walker.com (5)

  • 続・iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

    前書いたiOSのSafariで幅計算がおかしくなる件、もうちょい調査してみた。 どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。 「あ」の文字のspan要素のoffsetWidthをJSで取得するデモ。 DEMO これiPhoneで見るとこうなる。 なんかIEでもfont-sizeが11px指定のときに12pxで表示されるというバグがあった気がするけど、このバグはさらに凶悪で、フォントサイズは指定したサイズになるけどoffsetWidthだけ指定のサイズより大きくなるというもの。それであのようなずれが生じるみたいです。 JSでoffsetWidthの値の変化がとれるということはバグがあるかどうか判定できそうだということでやってみた。 var mbFontsizeWidthCa

    続・iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker
  • iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

    iOSのSafariでなぜか特定のfont-size(11px、10px、9px)のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。 DEMO これをiPhoneで見るとこんな感じになる。 こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-sizeのときだけなぜか隙間が空くんです。8pxは大丈夫なので11px以下というわけではないみたい。さらにマルチバイトでなければ隙間はできない。謎。 ちなみにiOS4.3でも直ってなかった。Androidは大丈夫。 解決方法知ってる人がいたら教えてほしい。 追記:letter-spacing: -0.001em; で直るっぽい

    iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker
  • ページの高さを自動調節するjavascript - Webtech Walker

    Home Archive ページの高さを自動調節するjavascript ページの高さを自動調節するjavascript 2007年03月26日 category:javascript Comment(0) Trackback(0) コンテンツの量が少ないページだと、極端にページの高さが小さくなったりすることがあります。cssのheightプロパティで高さをしてしまえばいいのですが、コンテンツの内容が変わる度にcssを編集するのは管理が大変になってしまいます。 コンテンツ量が少ない場合のページのサンプル そこでコンテンツ量が少なくても、ウインドウの高さまでは高さを確保するjavascriptを書いてみました。 ページの高さを調整するページのサンプル このスクリプトは下記のようになっています。 window.onload = function(){ var wra

  • meca.js

    meca.jsとは meca.jsはマークアップエンジニアのコーディングを補助するためのjavascriptです。画像のロールオーバーやIE6の透過png対応などを実装しており、それぞれの機能を簡単にon/offできるので、使わない機能は無効にしてたりできます。その他にも、ターゲットになる要素のセレクタを設定でたりするのである程度柔軟に対応できます。(→元エントリー) 使い方 jQueryとmeca.jsを読み込みます。meca.jsの一番上の方に設定を書いてあるところがありますので、そこを自分の好きな設定に書き換えて下さい。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="meca.js"></script> ページ毎に設定を変更する meca.js

  • word-break:break-allをFirefox等でも実現するjavascript - Webtech Walker

    最近やたらとURLなどの文字列が折り返されない現象で頭を悩まされます。IEとSafari3以降はCSSでword-break:break-allを指定すれば折り返してくれます。Firefox3はハイフン(-)やスラッシュ(/)があればそこで折り返すのですが、半角英数のみだと折り返してくれません。word-break:break-allと少し挙動が違うようです。Firefox2はハイフン等の記号があっても折り返さず、突き抜けてしまします。 to-RさんがFirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を公開していますが、tableだけにしか適用されずFirefox2をサポートしていないので、自分で書いてみました。(追記:ソースをgistにあげました) wordbreak.js for jQuery — Gist IEとFirefox2

    word-break:break-allをFirefox等でも実現するjavascript - Webtech Walker
  • 1