CSSで文字の調整をしていて、日付の方向に、曜日の方向を合わせたいですが、曜日が下を向いてしまいます。

カレンダーのテーブルを作ってます
CSSで文字の調整をしていて、日付の方向に、曜日の方向を合わせたいですが、曜日が下を向いてしまいます。

どなたか解決方法がわかれば教えて下さい。

css
1/* 現在のCSS */
2.rotate-header {
3    padding: 0px;
4    text-align: left;
5    writing-mode: vertical-lr;
6    transform: rotate(180deg);
7}

mee12

2022/08/05 07:54

英語環境で文字の配置に問題があり、文字を上寄せにする必要がでてきました。別の質問として投稿させていただきました。もしよろしければご確認お願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

私のやり方でやってみる

CSS
1.rotate-header {
2    padding: 0px;
3    text-orientation: sideways;
4    writing-mode: vertical-rl;
5    transform: rotate(180deg);
6}

投稿2022/08/05 07:06

joshoangtien

総合スコア65

mee12

2022/08/05 07:29 編集

ご回答ありがとうございます。教えて頂いた方法で、日本語、英語ともに向きを変えることができました。文字の方向転換は難しいですね。

行動規範の内容に同意します

英字にwriting-mode: vertical-lr;は単独では効かないのでtext-orientation: upright;で強制する必要があるようです。
というか画像の通りにしたいならwriting-mode: vertical-lr;を使わずにそのまま270度回転させればいいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>文字の回転</title>
7    <style>
8        .rotate-header {
9            width: 200px;
10            padding: 0px;
11            transform: rotate(270deg);
12        }
13    </style>
14</head>
15
16<body>
17    <div class="rotate-header">
18        <div>2022/6/05(日)</div>
19        <div>2022/6/06(月)</div>
20        <div>2022/6/07(火)</div>
21        <div>2022/6/08(水)</div>
22        <div>2022/6/09(木)</div>
23    </div>
24</body>
25
26</html>

https://codepen.io/riafeed/pen/MWVGwQe

投稿2022/08/05 07:16

RiaFeed

総合スコア2701

mee12

2022/08/05 07:28

ご回答ありがとうございます。私の環境では動作させることができませんでした。質問に記載していなくすみません。javascript gridを使用していたので、方向転換はできているっぽいのですが、文字がつぶれてしまいました。英語環境での表示にも注意してみたいと思います。

行動規範の内容に同意します

text-orientation: sidewaysを入れてテキスト全部を回転させるか、以下のように、transformで普通に回転させるか、あたりでしょうか。

css
1        .rotate-header {
2            padding: 0px;
3            text-align: left;
4            transform: translateX(-100%) rotate(-90deg);
5            transform-origin: top right;
6            width: fit-content;
7        }