質問編集履歴

3 誤字修正

east-end

east-end score 6

2018/02/01 18:30  投稿

iPhone(safari, chrome)で縦書きフォームを表示したい
### 前提・実現したいこと
現在、「**縦書きで入力できるフォーム**」を作っています。
Windowsのchrome, IE11,Edge,Firefoxでは表示がうまくいったのですが、
MacのSafari, iPhoneのsafari,chromeではフォーム内の文字が「**横向き**」になってしまい直せないでいます。もし方法をご存知でしたらお答え頂きたいです。
MacのSafariiPhoneのsafari,chromeではフォーム内の文字が「**横向き**」になってしまい直せないでいます。もし方法をご存知でしたらお答え頂きたいです。
よろしくお願いいたします。
### 該当のソースコード
以下のコードでsafariに対してフォーム(input, texytarea)を縦書きにするよう、CSSハックを書いています。
以下のコードでsafariに対してフォーム(input, textarea)を縦書きにするよう、CSSハックを書いています。
```css
_::-webkit-full-page-media, _:future, :root
input,
textarea {
   -webkit-writing-mode: vertical-rl;
   writing-mode: vertical-rl;
}
```
### 試したこと
ブラウザごとに以下をCSSハックで記述。
これでWindows上ではブラウザごとの対応ができました。
しかしMacのsafari、iPhoneのsafari, Chromeでは横書きのままでした。
**・IE11**
```css
@media all and (-ms-high-contrast:none) {
   *::-ms-backdrop,
   input,
   textarea {
       -ms-writing-mode: tb-rl;
       writing-mode: tb-rl;
   }
}
```
**・Firefox**
```css
@-moz-document url-prefix() {
   input,
   textarea {
       -moz-writing-mode: vertical-rl;
       writing-mode: vertical-rl;
   }
}
```
**・Chrome **
chromeはフォームが縦書きにならないので、フォーム自体を回転し文字をwriting-mode: initalで戻しました。
```css
@media screen and (-webkit-min-device-pixel-ratio:0) {
   input,
   textarea {
   position: absolute;
       writing-mode: initial;
       transform: rotate(90deg);
       transform-origin: top left;
   }
}
```
**・Edge **
chromeのcssハックが適用されてしまうため、上書きしています。
```css
@supports (-ms-ime-align:auto) {
  input,
   textarea {
       position: static;
       -webkit-writing-mode: vertical-rl;
       writing-mode: vertical-rl;
       transform: none;
       transform-origin: none;
   }
}
```
### 補足情報
**Mac**
safari 10.1.2
**iPhone**
safari 11.0 Mobile
**参考にさせて頂いたサイト**
[HTML/CSSだけで縦書きの入力フォームをつくる](https://kuroeveryday.blogspot.jp/2017/04/vertial-input-forms.html?showComment=1517469996188#c938529383974582869)
[縦書きweb普及委員会 CSS WritingModeの仕様解説](https://tategaki.github.io/explan1.html)
  • HTML

    24410 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17441 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2 誤字を修正

east-end

east-end score 6

2018/02/01 17:33  投稿

iPhone(safari, chrome)で縦書きフォームを表示したい
### 前提・実現したいこと
現在、「**縦書きで入力できるフォーム**」を作っています。
Windowsのchrome, IE11,Edge,Firefoxでは表示がうまくいったのですが、
MacのSafari, iPhoneのsafari,chromeではフォーム内の文字が「**横向き**」になってしまい直せないでいます。もし方法をご存知でしたらお答え頂きたいです。
よろしくお願いいたします。
### 該当のソースコード
以下のコードでsafariに対してフォーム(input, texytarea)を縦書きにするよう、CSSハックを書いています。
```css
_::-webkit-full-page-media, _:future, :root
input,
textarea {
   -webkit-writing-mode: vertical-rl;
   writing-mode: vertical-rl;
*/
}
```
### 試したこと
ブラウザごとに以下をCSSハックで記述。
これでWindows上ではブラウザごとの対応ができました。
しかしMacのsafari、iPhoneのsafari, Chromeでは横書きのままでした。
**・IE11**
```css
@media all and (-ms-high-contrast:none) {
   *::-ms-backdrop,
   input,
   textarea {
       -ms-writing-mode: tb-rl;
       writing-mode: tb-rl;
   }
}
```
**・Firefox**
```css
@-moz-document url-prefix() {
   input,
   textarea {
       -moz-writing-mode: vertical-rl;
       writing-mode: vertical-rl;
   }
}
```
**・Chrome **
chromeはフォームが縦書きにならないので、フォーム自体を回転し文字をwriting-mode: initalで戻しました。
```css
@media screen and (-webkit-min-device-pixel-ratio:0) {
   input,
   textarea {
   position: absolute;
       writing-mode: initial;
       transform: rotate(90deg);
       transform-origin: top left;
   }
}
```
**・Edge **
chromeのcssハックが適用されてしまうため、上書きしています。
```css
@supports (-ms-ime-align:auto) {
  input,
   textarea {
       position: static;
       -webkit-writing-mode: vertical-rl;
       writing-mode: vertical-rl;
       transform: none;
       transform-origin: none;
   }
}
```
### 補足情報
**Mac**
safari 10.1.2
**iPhone**
11.0 Mobile
safari 11.0 Mobile
**参考にさせて頂いたサイト**
[HTML/CSSだけで縦書きの入力フォームをつくる](https://kuroeveryday.blogspot.jp/2017/04/vertial-input-forms.html?showComment=1517469996188#c938529383974582869)
[縦書きweb普及委員会 CSS WritingModeの仕様解説](https://tategaki.github.io/explan1.html)
  • HTML

    24410 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17441 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1 参考にさせて頂いたサイトを追加しました

east-end

east-end score 6

2018/02/01 17:08  投稿

iPhone(safari, chrome)で縦書きフォームを表示したい
### 前提・実現したいこと
現在、「**縦書きで入力できるフォーム**」を作っています。
Windowsのchrome, IE11,Edge,Firefoxでは表示がうまくいったのですが、
MacのSafari, iPhoneのsafari,chromeではフォーム内の文字が「**横向き**」になってしまい直せないでいます。もし方法をご存知でしたらお答え頂きたいです。
よろしくお願いいたします。
### 該当のソースコード
以下のコードでsafariに対してフォーム(input, texytarea)を縦書きにするよう、CSSハックを書いています。
```css
_::-webkit-full-page-media, _:future, :root
input,
textarea {
   -webkit-writing-mode: vertical-rl;
   writing-mode: vertical-rl;
*/
```
### 試したこと
ブラウザごとに以下をCSSハックで記述。
これでWindows上ではブラウザごとの対応ができました。
しかしMacのsafari、iPhoneのsafari, Chromeでは横書きのままでした。
**・IE11**
```css
@media all and (-ms-high-contrast:none) {
   *::-ms-backdrop,
   input,
   textarea {
       -ms-writing-mode: tb-rl;
       writing-mode: tb-rl;
   }
}
```
**・Firefox**
```css
@-moz-document url-prefix() {
   input,
   textarea {
       -moz-writing-mode: vertical-rl;
       writing-mode: vertical-rl;
   }
}
```
**・Chrome **
chromeはフォームが縦書きにならないので、フォーム自体を回転し文字をwriting-mode: initalで戻しました。
```css
@media screen and (-webkit-min-device-pixel-ratio:0) {
   input,
   textarea {
   position: absolute;
       writing-mode: initial;
       transform: rotate(90deg);
       transform-origin: top left;
   }
}
```
**・Edge **
chromeのcssハックが適用されてしまうため、上書きしています。
```css
@supports (-ms-ime-align:auto) {
  input,
   textarea {
       position: static;
       -webkit-writing-mode: vertical-rl;
       writing-mode: vertical-rl;
       transform: none;
       transform-origin: none;
   }
}
```
### 補足情報
**Mac**
safari 10.1.2
**iPhone**
11.0 Mobile
11.0 Mobile
**参考にさせて頂いたサイト**
[HTML/CSSだけで縦書きの入力フォームをつくる](https://kuroeveryday.blogspot.jp/2017/04/vertial-input-forms.html?showComment=1517469996188#c938529383974582869)
[縦書きweb普及委員会 CSS WritingModeの仕様解説](https://tategaki.github.io/explan1.html)
  • HTML

    24410 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17441 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る