CSSで半角英数を全角と同じ幅にしたい

単純に等幅で表示すると、「半角」の名のとおり全角文字の半分の幅になりますが
そうでなく全角文字と同じ幅を確保させる方法って何かあるでしょうか？

<textarea>内で使います（contenteditableでなく）。文字そのものの形を変えるというよりは、原稿用紙のようなイメージで空白が広く取られるのが理想です。 JavaScriptにて半角文字を正規表現で全角に置換するという方法も試しましたができればCSSでどうにかできないかと思って質問させていただきました。

yoshinavi

2019/03/18 17:29

等幅フォントだと、全角の幅が「全角文字」であり、半分が「半角文字」なので、これは変えようがないかと… 字間を調整したいだけなら「letter-spacing」ではダメなのでしょうか？

think49

2019/03/19 00:07 編集

なぜ全角文字である必要があるのでしょう？全角文字を強制しなくても良い解決の方向性はありませんか。

flc

2019/03/19 06:18

> yoshinavi いえ、「変えようがない」というのは間違っているようです。ただの思い込みによるコメントは迷惑ですので控えるようお願いしたく思います（ikadzuchiさんの回答にあるリンク先を参照なさってください） https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html#fwid

flc

2019/03/19 06:23

> think49 質問本文に「原稿用紙のようなイメージで」と書いたとおりです半角文字が半角幅で表示されるとズレが生じて編集性が悪くなるため、それを回避したいというユーザビリティの観点から全角表示をしたいと考えました

yoshinavi

2019/03/19 09:26

私のコメントに書いた意味は理解出来ませんか？

flc

2019/03/19 09:45

と言いますと？本当はCSSで変える方法あるのに「変えようがない」と決めつけるのは、明らかに誤ったコメントですよね font-stretch: 200%; (FireFoxのみ) text-transform: full-width; (FireFoxのみ) font-feature-settings: fwid; (OpenTypeのみ) 3つもの方法が寄せられましたが…

yoshinavi

2019/03/19 12:39

3つの方法の内容は理解されてますか？どれも、半角に全角の幅を持たせる意味ではないですよ。

flc

2019/03/19 14:57

yoshinavi へ？話しぶりがさっきからおかしいのでまさかとは思ってましたが「divとかでいうところのmarginやpaddingが増えてて全角のように見えてるだけであって中身の大きさは変わってない」みたいな屁理屈言い出すつもりじゃないですよね…？一応、質問文にも「全角文字と同じ幅を【確保】させる方法」「空白が広く取られるのが理想」と書いたつもりですが… どういう意味だって言いたいんです？

yoshinavi

2019/03/20 02:22

＞「divとかでいうところのmarginやpaddingが増えてて全角のように見えてるだけであって中身の大きさは変わってない」 →　これが、あなたの求めている「半角のまま（置き換えない）」で「全角の幅を持たせる方法」の事では？ ①font-stretch：○○%; 幅広タイプが用意されていればそのタイプに「置き換えて」表示します。 ②text-transform: full-width; 「半角」を「全角」に「置き換えて」表示します。 ③font-feature-settings: fwid; 「半角」を「全角」に「置き換えて」表示します。結論、全角の幅を求めるのであれば「全角」で記述する。

oikashinoa

2019/03/20 07:26 編集

flcさんへ > 文字そのものの形を変えるというよりは、原稿用紙のようなイメージで空白が広く取られるのが理想 > JavaScriptにて半角文字を正規表現で全角に置換するという方法も試しましたが一度Excelとかでイメージを書いてみては？んで、画像をUpする。 - letter-spacingだと全角文字と対比して半角文字が（スペースが右に入るから）左揃えみたいになる　- 出来ればセンタリングしたい（方眼に書くイメージから想像） - 次善の策で入力半角文字を全角幅で表示させたいっていうふうに意味合いを取ったんですがよく分からんくなってきました。あと、見知らぬ人が無償で答えてくれているのにちょっと頂けない文面と思います。いまこの件で困っているのはごく少数だと思います。皆さん無償で調べて答えているのですよ。知っていたとしても答える義務はありません。もし解決方法を知らない人は回答するなと考えているならそれなりの対価を払うことを考えましょう。

flc

2019/03/20 07:34

yoshinavi そうですね、なのでもしその通りにできたのなら「理想どおり」なので「できていない」ってことにはならず（もちろん現在すでに寄せられている回答3つは違いますが）そして「理想」はあくまで理想なので… textareaって何に使うか知ってます？「見え方」だけじゃなくて「中身」（value）も重要になってきますよね？質問文に書いたようにvalueの値は入力のたびにいちいち置換したくない（oninputなどを使えばもちろん可能ではありますが）… なので質問文に書いたように、中身は半角文字のまま見え方だけ全角の幅が確保できる方法（CSS）が求められるわけです。できればvalueが半角文字なのか全角文字なのかリアルタイムで知りやすくするためにも、表示を置き換えないのが「理想」でしたが…いくら字形を別々にしてもどうせ見分けはつきづらいでしょうし、これは別途いくらでも解決できるでしょう。回答者さんたちの回答は、「理想」にこそ当てはまっていなくてもしっかり質問タイトル（CSSで半角英数を全角と同じ幅にしたい）に剃った答えを寄せてくれていると言えるでしょう。一方であなたの > 等幅フォントだと、全角の幅が「全角文字」であり、半分が「半角文字」なので、これは変えようがないかと… は今改めて見ても意味不明なコメントです。

flc

2019/03/20 07:42

oikashinoa 「解決方法を知らない人は回答するな」とは考えていません。知らないことを「知らない」と言うのなら嘘ではありませんが、できるかどうかわかってないのに「できない」と言うのはただの嘘、間違いでしょう。ごく少数の人にしか需要がない質問は、裏を返せばそのぶん検索してもなかなかヒットせず情報が貴重になるということでもあります。なので嘘を書かれてそれがWeb上に残ると困るわけです。また、対価を払ったからと言って嘘の回答が来ないとは限りません。そこは有償・無償にさほど関係ないと考えます（むしろこういう開かれた場でないと余計に…）。

oikashinoa

2019/03/20 07:55 編集

ちょっとキツ目のこと書いてしましたね、ごめんなさい。自分でfont-stretchなんて回答しておきながら言うのはおかしいと思うのですが… > 中身は半角文字のまま見え方だけ全角の幅が確保できる方法（CSS）が求められるわけです。個人的には混乱のもとだと思ってます。 - 半角入力しても全角（の幅確保した）表示って、自分だったら戸惑うかな。　- flcさんのイメージが理解してないだけかも。図示してほしいなぁ。 - 入力者は半角、全角どっちを入れているのか分からなくなるかと。 teratailの質問入力時のようにプレビューさせて、プレビュー側で全角表示では意味ないですかね？

yoshinavi

2019/03/22 04:04

質問者さんへ質問が「解決済み」でない理由は何でしょうか？適切な回答がないからですか？であれば、質問を再編集して何を求めるかを明確にすることをオススメします。今のままだと質問が矛盾しています。・「原稿用紙のようなイメージ」を求めるのであれば「等幅フォント」しかありませんが、明確にしてください。 ※文字を読みやすくするのが「プロポーショナルフォント」の目的なので、可読性は損なわれる可能性が考えられます。・「全角文字と同じ幅を確保させる方法」は、半角文字のままなのか、全角に置換しても良いのか明確にしてください。 ※だったら、最初から「全角のみ入力」が労力は最少かと思われます。