Q&A
等幅フォントだと、全角の幅が「全角文字」であり、半分が「半角文字」なので、これは変えようがないかと…
字間を調整したいだけなら「letter-spacing」ではダメなのでしょうか？
単純に等幅で表示すると、「半角」の名のとおり全角文字の半分の幅になりますが
そうでなく全角文字と同じ幅を確保させる方法って何かあるでしょうか？
なぜ全角文字である必要があるのでしょう？全角文字を強制しなくても良い解決の方向性はありませんか。
> yoshinavi
いえ、「変えようがない」というのは間違っているようです。ただの思い込みによるコメントは迷惑ですので控えるようお願いしたく思います
（ikadzuchiさんの回答にあるリンク先を参照なさってください）
https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html#fwid
> think49
質問本文に「原稿用紙のようなイメージで」と書いたとおりです
半角文字が半角幅で表示されるとズレが生じて編集性が悪くなるため、それを回避したいというユーザビリティの観点から全角表示をしたいと考えました
私のコメントに書いた意味は理解出来ませんか？
と言いますと？
本当はCSSで変える方法あるのに「変えようがない」と決めつけるのは、明らかに誤ったコメントですよね
font-stretch: 200%; (FireFoxのみ)
text-transform: full-width; (FireFoxのみ)
font-feature-settings: fwid; (OpenTypeのみ)
3つもの方法が寄せられましたが…
3つの方法の内容は理解されてますか？
どれも、半角に全角の幅を持たせる意味ではないですよ。
yoshinavi
へ？
話しぶりがさっきからおかしいのでまさかとは思ってましたが
「divとかでいうところのmarginやpaddingが増えてて全角のように見えてるだけであって中身の大きさは変わってない」
みたいな屁理屈言い出すつもりじゃないですよね…？
一応、質問文にも「全角文字と同じ幅を【確保】させる方法」「空白が広く取られるのが理想」と書いたつもりですが…
どういう意味だって言いたいんです？
＞「divとかでいうところのmarginやpaddingが増えてて全角のように見えてるだけであって中身の大きさは変わってない」
→ これが、あなたの求めている「半角のまま（置き換えない）」で「全角の幅を持たせる方法」の事では？
①font-stretch：○○%;
幅広タイプが用意されていればそのタイプに「置き換えて」表示します。
②text-transform: full-width;
「半角」を「全角」に「置き換えて」表示します。
③font-feature-settings: fwid;
「半角」を「全角」に「置き換えて」表示します。
結論、全角の幅を求めるのであれば「全角」で記述する。
flcさんへ
> 文字そのものの形を変えるというよりは、原稿用紙のようなイメージで空白が広く取られるのが理想
> JavaScriptにて半角文字を正規表現で全角に置換するという方法も試しましたが
一度Excelとかでイメージを書いてみては？んで、画像をUpする。
- letter-spacingだと全角文字と対比して半角文字が（スペースが右に入るから）左揃えみたいになる
- 出来ればセンタリングしたい（方眼に書くイメージから想像）
- 次善の策で入力半角文字を全角幅で表示させたい
っていうふうに意味合いを取ったんですがよく分からんくなってきました。
あと、見知らぬ人が無償で答えてくれているのにちょっと頂けない文面と思います。いまこの件で困っているのはごく少数だと思います。皆さん無償で調べて答えているのですよ。知っていたとしても答える義務はありません。
もし解決方法を知らない人は回答するなと考えているならそれなりの対価を払うことを考えましょう。
yoshinavi
そうですね、なのでもしその通りにできたのなら「理想どおり」なので「できていない」ってことにはならず（もちろん現在すでに寄せられている回答3つは違いますが）
そして「理想」はあくまで理想なので…
textareaって何に使うか知ってます？
「見え方」だけじゃなくて「中身」（value）も重要になってきますよね？
質問文に書いたようにvalueの値は入力のたびにいちいち置換したくない（oninputなどを使えばもちろん可能ではありますが）…
なので質問文に書いたように、中身は半角文字のまま見え方だけ全角の幅が確保できる方法（CSS）が求められるわけです。
できればvalueが半角文字なのか全角文字なのかリアルタイムで知りやすくするためにも、表示を置き換えないのが「理想」でしたが…いくら字形を別々にしてもどうせ見分けはつきづらいでしょうし、これは別途いくらでも解決できるでしょう。
回答者さんたちの回答は、「理想」にこそ当てはまっていなくてもしっかり質問タイトル（CSSで半角英数を全角と同じ幅にしたい）に剃った答えを寄せてくれていると言えるでしょう。
一方であなたの
> 等幅フォントだと、全角の幅が「全角文字」であり、半分が「半角文字」なので、これは変えようがないかと…
は今改めて見ても意味不明なコメントです。
oikashinoa
「解決方法を知らない人は回答するな」とは考えていません。
知らないことを「知らない」と言うのなら嘘ではありませんが、
できるかどうかわかってないのに「できない」と言うのはただの嘘、間違いでしょう。
ごく少数の人にしか需要がない質問は、裏を返せばそのぶん検索してもなかなかヒットせず情報が貴重になるということでもあります。
なので嘘を書かれてそれがWeb上に残ると困るわけです。
また、対価を払ったからと言って嘘の回答が来ないとは限りません。そこは有償・無償にさほど関係ないと考えます（むしろこういう開かれた場でないと余計に…）。
ちょっとキツ目のこと書いてしましたね、ごめんなさい。
自分でfont-stretchなんて回答しておきながら言うのはおかしいと思うのですが…
> 中身は半角文字のまま見え方だけ全角の幅が確保できる方法（CSS）が求められるわけです。
個人的には混乱のもとだと思ってます。
- 半角入力しても全角（の幅確保した）表示って、自分だったら戸惑うかな。
- flcさんのイメージが理解してないだけかも。図示してほしいなぁ。
- 入力者は半角、全角どっちを入れているのか分からなくなるかと。
teratailの質問入力時のようにプレビューさせて、プレビュー側で全角表示では意味ないですかね？
質問者さんへ
質問が「解決済み」でない理由は何でしょうか？適切な回答がないからですか？
であれば、質問を再編集して何を求めるかを明確にすることをオススメします。今のままだと質問が矛盾しています。
・「原稿用紙のようなイメージ」を求めるのであれば「等幅フォント」しかありませんが、明確にしてください。
※文字を読みやすくするのが「プロポーショナルフォント」の目的なので、可読性は損なわれる可能性が考えられます。
・「全角文字と同じ幅を確保させる方法」は、半角文字のままなのか、全角に置換しても良いのか明確にしてください。
※だったら、最初から「全角のみ入力」が労力は最少かと思われます。
回答3件
0
単に半角から全角に変換するだけなら、CSS で
CSS
1text-transform: full-width;
でいけるんですが、それじゃダメなんですよね？
投稿2019/03/19 00:51
総合スコア13703
あるんですね、素晴らしい…と思いましたが
https://developer.mozilla.org/ja/docs/Web/CSS/text-transform
現状FireFoxのみ対応のようで…？
そういえばそうでしたね……もともとこの指定自体が実験的なもので、今後の CSS の勧告ではなくなる可能性もあるので、使うべきではないと言うことになりそうです。
こういうのもあるんですね。OpenTypeの機能と違って非対応のフォントでも使えるようなのが利点ですね。正式になればよいのですが。
0
フォントによりますがOpenTypeの機能でできますね。
https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html#fwid
どの程度実用的かは疑問ですが。
投稿2019/03/19 00:43
総合スコア3047
0
全角文字と同じ幅を確保させる方法って何かあるでしょうか？
半角も全角の幅があるWebフォントを作るか探すかすれば出来ると思います。
文字幅はフォント依存なのでCSSでは編集できないと思います。
投稿2019/03/18 14:31
総合スコア69458
css（font-face) ならできるさ。
To: asahina1979さん
出来るなら回答に書きなさい。
全角文字も半角サイズにしちゃうというフォントは見かけましたが、その逆はてっきりあるかと思って探してみてもなかなか見つけられず…
普通は半角と全角を区別できることも重要ですからね。なので、無ければ作ってしまうくらいしか方法は無いかなと思います。（改変が比較的自由な日本語フォントもありますし）
フォント、ブラウザに依存するので参考程度ですが。
特定の文字だけ幅を200%にしたらいけるかも
https://developer.mozilla.org/ja/docs/Web/CSS/font-stretch
いいですねこれ
その「特定の文字だけ」ってのはどうやるんでしょうか…
検索してみるとfont-faceでのやり方は出てきましたが、大きさとなると…？
font-face及びunicode-range、font-stretchで実現できないですかね？
- 現在使おうとしているフォントの文字とできるだけ似ているフォントを読み込んで。
あなたの回答
tips
プレビュー
