【質問】thをCSSで縦書きにしたい

[gobo]

こんにちは、鏑木です。

もしかして出来ないんじゃないかと思いつつ、質問です。

表題の通りなんですが、

tableまたはdisplay:tableした要素の中のthにあたる部分を、CSSで1行の縦書きにする方法を探しています。

環境はスマートフォンに限っていただいて結構です。

現在、下記の書き方で、

<tr>

<th><span>縦書きしたーい</span></th>

<td>テキストテキストテキスト</td>

</tr>

th>span {

-webkit-writing-mode: vertical-rl;

writing-mode: vertical-rl;

-webkit-text-orientation: upright;

text-orientation: upright;

}

・右から左へ向かったth横書き一行（長音は縦）に、tdが完全に重なっています。

・thにwidth: 1em;を指定しても何も起こりません。

・th>spanにwidth: 1em;を指定すると最初の一文字がthの正しい位置に来て、

　そこから左の枠外へはみ出していきます。

CSSでthを縦書きすることは、2015年にはまだ無理なのでしょうか……？

[IMAGEDRIVE]

こんにちは、吉村です。

以下の方法で、ご要望に叶いませんでしょうか。

th {
white-space:nowrap;
}
th span {
-webkit-writing-mode:vertical-rl;
}

<table>

 <tr>
  <th><span>縦書きしたーい</span></th>

 </tr>
 <tr>
  <td>テキストテキストテキスト</td>
 </tr>
</table>

2015年12月14日 18:08 gobo <g.kab...@gmail.com>:

--
このメールは Google グループのグループ「html5j」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには html5-developer...@googlegroups.com にメールを送信してください。
このグループに投稿するには html5-dev...@googlegroups.com にメールを送信してください。
https://groups.google.com/group/html5-developers-jp からこのグループにアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

--

--------------------------------------------
img...@gmail.com
--------------------------------------------

[yuka kobayashi]

こんにちは。

スマホではChromeでしか見てないのですが、こんな感じで書いてみました。いかがでしょうか...

http://jsfiddle.net/kobachiya/b6e22p4c/embedded/result/

span {

  -ms-writing-mode: tb-rl;

  -webkit-writing-mode: vertical-rl;

  -o-writing-mode: vertical-rl;

  writing-mode: vertical-rl;

  width: 1em;

}

th {

  white-space: nowrap;

}

2015年12月14日 18:55 IMAGEDRIVE <img...@gmail.com>:

[kubosho_]

久保田です。

すでに吉村さんや小林さんが回答を出されていますが、これらを踏まえた上で必要なベンダープレフィックスを付加すると次のようになります。環境はスマートフォンということで、IE Mobile向けに-ms-ベンダープレフィックスを付けてみました。

（参考：http://caniuse.com/#feat=css-writing-mode）

https://jsfiddle.net/60bgmfsq/1/

ただこの場合th要素内に入る文字を改行した場合、thとtd要素が重なるように見えるなどの問題があるため、th要素内の文字は1行で書く必要があります。

const me = {

  name: 'kubosho_',

  mail: 't...@o2p.jp',

  blog: 'http://blog.kubosho.com/',

  twitter: '@kubosho_'

};

[IMAGEDRIVE]

こんにちは、吉村です。

昨日の記述だと、テーブルヘッダーの文字列がデータセルの文字列より長いとき、
Safariでテーブルヘッダーの幅が広がる（横書きの幅になる）のを確認したので、CSSを以下のように変更しました。

th {
vertical-align:top;
text-align:center; /* [2]Chromeで中央に寄せたいときに指定 */
white-space:nowrap;
}
th > span {
display:block; /* [1]Safariで幅が広がるのを防止 */
margin:0 auto; /* [2]Chromeで中央に寄せたいときに指定 */
-webkit-writing-mode:vertical-rl;
}

相変わらずPC版のSafariとChromeでしか見ていません。

よろしくお願いします。

2015年12月14日 19:20 kubosho_ <t...@o2p.jp>:

--

--------------------------------------------
img...@gmail.com
--------------------------------------------

[gobo Kaburaki]

鏑木です。

みなさまありがとうございます。

white-space:nowrap; と display:block; が覿面に効きました。

ということは、複数行縦書きはまだ出来ないということなのでしょうね。

今回は1行で十分だったので、これで作っていきたいと思います。

本当にありがとうございました。

2015年12月15日 11:56 IMAGEDRIVE <img...@gmail.com>:

[Koji Ishii]

縦横混在で、かつブロックのサイズを fit-content
（内容物に合わせる）の場合には、ブラウザーの実装が追いついていません。吉村さんが回避策を上げてくださったように、縦横のサイズを指定してあげれば、可能です。

IE/Edge は普通に動作するはずです。さすがに縦書き実装が長いだけあります。

Chrome は、夏頃に inline-block や float
で単純なケースは直りましたが、表の中や、複雑なケースはまだ対応ができていません。バグはこちらにありますので、よろしければ、左上のスターをクリックして投票してください。
http://crbug.com/550963

Firefox も途中までの修正がありますが、ここ数ヶ月動きが止まっています。バグはこちらです。
https://bugzilla.mozilla.org/show_bug.cgi?id=1166120

Safari のバグはこちらです。
https://bugs.webkit.org/show_bug.cgi?id=112897

/koji

2015年12月15日 15:05 gobo Kaburaki <g.kab...@gmail.com>:

[gobo Kaburaki]

ありがとうございます、実装するものはブロックサイズを細かく指定できないので、1行垂れ流しでいきます。

特定のメルマガを名指ししていいのかわかりませんが、

CodeGridで12/17から「ブラウザにおける縦書き最新事情」が始まりましたね。

英語のハードルが高い人間にはありがたいまとめなので、熟読します。