忍者ブログ
忘れっぽい開発者の備忘録。基本的に自分用メモです。
2017.12.18,Mon
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2011.09.20,Tue
■CSSの縦書き表示について

CSSでの縦書き表示はIEでは「writing-mode」を使用して表現することが出来る。
それ以外のブラウザでも対応している場合があるが、基本的にはそれぞれのブラウザ別に仕込まなければいけない。
また、それぞれのブラウザごとに対応したと思ってもバージョンが違えば表示のされ方も異なってくる。
縦書き表現はまだまだ日が浅いものなので、あんまり期待しないほうが吉。

CSS
div.vw_div {
    float:right;
    position : relative;
    width:1em;
    line-height:1em;
    word-wrap:break-word;
    direction:ltr;
}
span.vw_span1 {    
    margin-top:0em;
    font-size:10px;
    /* IE用縦書き */
    writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    /* FireFox用縦書き */
    -moz-writing-mode: vertical-rl;
    -moz-transform: translate(0em, -0.3em) rotate(0deg);
    /* Chrome用縦書き */
    -webkit-writing-mode: vertical-rl;
    -webkit-transform-origin: left top;
    -webkit-transform:translate(-0.1em,0em);
    /* Opera用縦書き */
    -o-writing-mode: vertical-rl;
    -o-transform-origin: left top;
    -o-transform: translate(-1em,-1em) rotate( 0deg );
}
span.vw_span2 {
    margin-top:0em;
    font-size:10px;
    /* FireFox用縦書き */
    -moz-transform-origin: left top;
    -moz-writing-mode: vertical-rl;
    -moz-transform: translate(1em, 0em) rotate(90deg);
    /* Opera用縦書き */
    -o-writing-mode: vertical-rl;
    -o-transform-origin: left top;
    -o-transform: translate(-1em,-1em) rotate( 90deg );
}


HTML
※vw_span2を使った「文字は横向きで縦書き表示」は、IE・Chromeの場合表現出来なかったのでvw_span2内の記述も削除しました。要注意!
<div class='vw_div'>
    <!-- 縦書き表示 -->
    <span class='vw_span1'>縦書きを表示しています。</span>
    <!-- 文字は横向きで縦書き表示 -->
    <span class='vw_span2'>縦書きを表示しています。</span>
</div>


■参考サイト
・縦書きWebページプロジェクト
ほぼ全てのブラウザに対応している縦書き表示サイト。非営利で使用するならここのjsファイルをダウンロードすれば良い。
http://freefielder.jp/tate/

・本の虫
Chromeの縦書き表示の参考サイト。
http://cpplover.blogspot.com/2011/03/chrome.html


CSS内の意味とかをあとで追加するかも。
PR
2011.09.01,Thu
■CSSハックについて

CSSで記述したものがブラウザによってずれたりする。
それをブラウザ別に対処するのがCSSハック。
まずはベースのブラウザを決めて、それ以外のブラウザ別にCSSハックを仕込めばOK。
※ベースと異なってる部分を赤文字表記にしてます。

Firefox(ベース)
.element{
margin: 0px;
}


Internet Explorer

IE7・IE8
.element{
margin/*\**/:0px\9;
}



IE用と言われているけど、実際はIE以外にも効いてしまったもの
これはfirefox6で適用されてしまいました。なので無意味だった。
html>/**/body .element{
margin:0px;
}


他にもやり方はあるようだけれど、基本的にIEのCSSハックはIE以外を基準にして
IE用にCSSハックを用意してあげると良さそう。
もっと本格的にやりたい場合は、閲覧者のブラウザ情報を取得して、そのブラウザごとのCSSを用意してあげれば完璧だと思うけど面倒くさそう。

まだ追加するかも?
 HOME 
カレンダー
11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
ブログ内検索
Template by mavericyard*
Powered by "Samurai Factory"
忍者ブログ [PR]