ユーザCSSを編集してTweetDeckを縦書き表示にする

# 10秒で分かる説明
ユーザCSSを設定できる拡張機能を使って、TweetDeckのタイムラインを縦書きにしました。

# 0.僕たちは横書きを強いられているんだ
現状では、Twitterは横書き表示しかできません。いつになったら縦表示を選べるようにしてくれるのでしょうか。非常にフラストレーションがたまるので、自分で縦書きにしてしまいましょう。
……しかし、縦に積み重なるタイムラインなど、横書き表示を前提としたUI設計なので、利便性を考え妥協に妥協を重ねます。

# 1.Tweetdeckにログイン
使っていない人は、[TweetDeck](https://tweetdeck.twitter.com/)からログインしてみましょう。ブラウザ版の公式Twitterは、縦書き表示にするとすごく見にくいので、カスタム性に優れたTweetDeckを使います。見やすさを追求するため、アプリケーションで開けるようにしておくことをお勧めします。

# 2.Stylebotをインストール
Chrome拡張機能である、[Stylebot](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)をインストールします。ユーザースタイルシートを設定できる拡張機能なら何でもいいです。お使いのものをどうぞ。

#3.CSSを上書きする
Tweetdeckを開いて画面右上、拡張機能一覧から、Sが書かれたマーク→「open stylebot」→「code」の順にクリックします。真っ白な画面が出てくるので、以下のコードをコピペしてください。

```css:style.css
.js-tweet-text.tweet-text.with-linebreaks {
  font-family: serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.35em;
  margin-top: 0.4em;
  max-height: 15.8em;
  writing-mode: vertical-rl;
}

.js-tweet-text.tweet-text.txt-size-variable--18.margin-b--10.with-linebreaks {
  font-family: sans-serif;
  max-height: initial;
  writing-mode: horizontal-tb;
}

.column {
  width: 400px;
}
```

TweetDeckを更新すると、タイムラインが縦書き表示になっているはずです。
![スクリーンショット (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984218/f1411a08-8ddf-1fdd-c33e-0b7a22f539f2.png)
Good…………

# 4.細かい説明
## タイムライン上のCSS
```css
.js-tweet-text.tweet-text.with-linebreaks {
  font-family: serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.35em;
  margin-top: 0.4em;
  max-height: 15.8em;
  writing-mode: vertical-rl;
}
```
ここでTLに流れる各ツイートの見た目を決定しています。各項目の詳細です。

| 各要素 | 説明 |
|:-:|:-:|
| `font-family`  | フォントをして指定ます。せっかくなので明朝体で。  |
| `font-size`  | フォントサイズを決定します。  |
|  `letter-spacing` | 文字の間隔を決定します。0.05em以上推奨です。  |
| `line-height`  | 行間隔を決定します。広めにとると縦読みしやすくなります。  |
|  `margin-top` |  デフォルトだと上部との間隔が狭いので、少し広くします。 |
|  `max-height` |  デフォルトではTLが縦に長くなってしまうので、縦の最大値を指定します。最低でも縦に15文字入るようにすると読みやすいです。 |
|  `writing-mode` |  一番重要な、文字方向を指定しています。 |

## 単独表示に関するCSS
```css
.js-tweet-text.tweet-text.txt-size-variable--18.margin-b--10.with-linebreaks {
  font-family: sans-serif;
  max-height: initial;
  writing-mode: horizontal-tb;
}
```
どうしても縦だと見にくい文章というのはあるので、単独表示したとき横書きになるようにしましょう。なお、`letter-spacing`と`line-height`に関しても気になるようでしたら、`initial`をつけてデフォルトの設定に戻してください。

## その他のCSS（カラムの幅）
```css
.column {
  width: 400px;
}
```
カラムの幅指定です。400px自体にあまり意味はないですが、狭すぎるとツイートが読みにくくなります。

これで最低限の改良は終わりです。指定した数量をいろいろ変えてみて、性に合うものを見つけてください。ここから先は好みに合わせた更なる改良になります。

# 5.更なる改良
対応するものを`.js-tweet-text.tweet-text.with-linebreaks`に追加してください。

##ツイートの基準を右に置きたい
横幅を設定することで文章の基準が右側になります。このとき、短いツイートが浮いた感じになって見にくいので、背景を薄い色で装飾するとよいです。

```css
.js-tweet-text.tweet-text.with-linebreaks {
  background-color: rgb(248, 255, 255);
  border-color: rgb(220, 248, 255);
  border-style: dotted;
  box-sizing: border-box;
  padding: 0.3em;
  width: 100%;
}

.js-tweet-text.tweet-text.txt-size-variable--18.margin-b--10.with-linebreaks {
  background: none;
  border: none;
  padding: initial;
  width: initial;
}
```

こんな感じになります。
![スクリーンショット (22).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984218/632b35b7-6482-45a5-1c10-8f6021bc3691.png)

## 英数字を立たせたい
デフォルトでは英数字は横方向に表示されているので、立たせたい場合はこれを追加します。

```css
.js-tweet-text.tweet-text.with-linebreaks {
  text-orientation: upright;
}
```

# 6.まとめ
これでTLに縦書きの文字が並び、最高の気分になることができました。しかしその代償として、画面に表示されるツイート数が半分以下になってしまいました。CSSが文字数を習得できないので、多分これは解決できないです。これも縦書きのためです、背に腹は代えられません。

# 備考
本当は横スクロール版も作りたかったのですが、Webエンジニアリング未経験の僕には無理でした。誰か頑張ってください。

Stylebotでの変更が反映されなくなったら、恐らくTweetDeckの仕様変更です。一年ほど使って、動かなくなったことはないので大丈夫だと思います。

# 参考リンク
[縦書きWeb普及委員会](https://tategaki.github.io/)