web-dev-qa-db-ja.com

CSSのみを使用したIE7、IE8、IE9、およびIE10の垂直テキスト

CSSのみを使用してIE7、IE8、IE9、およびIE10で垂直テキストを正常に実装する方法を知っている人はいますか？ （垂直テキストとは、テキストが反時計回りに90度回転していることを指します）

これは私が今日実装したものであり、正しいはずだと思います。

.counterclockwise-text {

/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-Origin: 50% 50%;

/* Firefox */
-moz-transform: rotate(-90deg);
-moz-transform-Origin: 50% 50%;

/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-Origin: 50% 50%;

/* This should work for IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-Origin: 50% 50%;

/* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */
zoom: 1\9;
writing-mode: tb-rl\9;
filter: flipv fliph;

}

ただし、IE10は「\ 9」CSSハックを無視していません。これらの値を取得し、テキストをさらに90度回転します。便利な解決策は、IE8以下でIE10では検出されない垂直テキストを作成する方法です。 IE8のみのスタイルシートを使用したり、IE10を検出するためのメディアクエリを使用したりすることは避けたいと思います。上記のCSSを変更して、すべてのブラウザで縦書きのテキストを表示する方法を探しています。ありがとうございました！

編集：

その価値については、フィルターを使用してテキストを回転させる以下のコードも試してみました。これはほとんどの場合に機能する可能性がありますが、私の場合、テキストの多くは、ラッピング要素の制限された（回転されていない？）制約によって切り捨てられます。

.counterclockwise-text {

/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-Origin: 50% 50%;

/* Firefox */
-moz-transform: rotate(-90deg); 
-moz-transform-Origin: 50% 50%;

/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-Origin: 50% 50%;

/* IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-Origin: 50% 50%;

/* IE8 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/* IE7 or less */
*zoom: 1;
*writing-mode: tb-rl;
*filter: flipv fliph;

}

IE10とIE8が満足している純粋なCSSでこれを行う方法をまだ見つけていません。

cssinternet-explorer-10vertical-text
12
JacobMcLock

これが純粋なCSS（+テキストごとに1つの追加div）ソリューションです

すべてのIEバージョンIE7-10で動作します

/** 
 * Works everywere ( IE7+, FF, Chrome, Safari, Opera )
 */
.rotated-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
}
.rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that doesn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(90deg);
       -moz-transform: translate(1.1em,0) rotate(90deg);
         -o-transform: translate(1.1em,0) rotate(90deg);
            transform: translate(1.1em,0) rotate(90deg);
    -webkit-transform-Origin: 0 0;
       -moz-transform-Origin: 0 0;
         -o-transform-Origin: 0 0;
            transform-Origin: 0 0;
   /* IE9+ */
   -ms-transform: none;
   -ms-transform-Origin: none;
   /* IE8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl;
}
.rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
}

/* mininless css that used just for this demo */
.container {
  float: left;
}

HTMLの例

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
  </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Normal</span></div>
     </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>
</body>
</html>

ソース： https://Gist.github.com/obenjiro/7406727

6
obenjiro

それは彼らが意図していることであり、それは傷つけたりハッキングしたりしません（ing head） s :).

2
G-Cyrillus

同じ問題がありますが、回転したテキストの読みやすさがさらに悪いため、次のものを使用しないことをお勧めします。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

iE9またはIE 8の場合。

それは、私のために働いたものです：

p.css-vertical-text {
    color:#333;
    border:0px solid red;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:24px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
}

から http://scottgale.com/css-vertical-text/2010/03/01/

0
Harry