web-dev-qa-db-ja.com

どうすれば空白文字を最適に表示できますか?

私が書いているWebアプリは、従来のキーボードで見つかった個々の文字を選別します。文字(基本的には使用しているフォントのW文字の幅)を表示できる領域が非常に限られているため、「スペース」または「空白」という単語を表示できません。

どうすれば空白文字を表示できますか?

私はいくつかのオプションを試しましたが、これらが単に混乱を招くだけかどうかはわかりません。

  • Example 1 下線を使用します。これは、アンダースコア文字に少し似すぎています。
  • Example 2 スペース記号(␠(␠))。この質問への回答を自分で探し始めるまで、これが存在することすら知らなかったので、広く認識されているかどうかはわかりません。
  • Example 2 別の色のかすかな下枠。
  • Example 3 ブロック文字(█(█))カーソルを表すために端末で使用されるものと同様です。
  • Example 4 スタイルが適用されていない空白スペース。

これが純粋に表示目的のためであることに注意する価値があると思います。ユーザーは、ページを読んでいるときにそこにいることを確認する以外に、文字とのやり取りはありません(したがって、 スペースバーを表すためにどの文字を使用できますか? )。

83
James Donnelly

Interpunct

邪魔にならず、ほとんど目立ちません。そして、それに慣れているWordユーザーはそれを簡単に認識できるため、ある程度の外部整合性が得られます。

コメントに基づいて、この回答を編集して、テキストとインターパントの違いを生成する必要があるため、フォントサイズを少し大きくし、色を黒から水色に変更したため、目立たなくなりました。また、これを文字として使用する言語(カタロニア語など)もあります。

この文字は、コンピューター時代(ラテン語で使用されていました)の前でも使用されていることに注意してください。

111
IAmJulianAcosta

私の行き先は常に空白でした、␣(␣)または括弧の下の文字⎵(⎵)の方が広いです。これらは w3.org で確認できます。私のプログラミングコースでは、ブラケットの下にある束を使用して、プログラム出力のスペースを示しています。

例えば ​​These␣do␣a␣pretty␣good␣job␣of␣conveying␣a␣spaceは次のようになります。

example with blank

ユニコードグリフを実装するフォントを使用していることを確認してください。これにより、ユーザーシステムにないグリフが壊れないか、次のようになります。

Example with font not containing the glyphs] 2

78
Brynn

簡潔な答え

キーボードのスペースバーを表すために、U + 23B5下角括弧(通常の⎵太字のモノスペース)。別の方法として、U + 2423 Open Box(␣)。 HTML parlaceでは、⎵および&blank、それぞれ。テキスト内のスペースを表すには、代わりにU + 2E31ワードセパレーターミドルドット(⸱)またはU + 00B7ミドルドット(・)を使用します。

心の繰り返しとその他の句読点:

  • U + 2E31:「前に4つのスペース、今は2つ、最後に1つ」
  • U + 00B7:····4・スペース・前、今···2、··············
  • U + 23B5:「前に4つのスペース、今は2つ、最後に1つ」
  • U + 2423:「前に4つのスペース、今は2つ、最後に1つ」

Monoespacedの方が優れています:

  • U + 2E31:⸱⸱⸱⸱Four⸱spaces⸱before,⸱now⸱⸱two,⸱one⸱at⸱end.⸱
  • U + 00B7:····Four·spaces·before,·now··two,·one·at·end.·
  • U + 23B5:⎵⎵⎵⎵Four⎵spaces⎵before,⎵now⎵⎵two,⎵one⎵at⎵end.⎵
  • U + 2423:␣␣␣␣Four␣spaces␣before,␣now␣␣two,␣one␣at␣end.␣

長い答え

スペースバーの場合、U + 23B5ボトムブラケット、HTML ⎵)を使用する方法です。これは携帯電話のキーボードや仮想キーボードで使用されている記号ですが、フォントのカバレッジが低くなっています。 U + 2423ボックスを開く、HTML &blank(␣)はより適切にサポートされ、他の句読点と見栄えがよくなりましたが、単独では醜いです:

テキスト内のスペースの視覚的表現は、より多様な獣です。昔のコンソールでは、マニュアルはスペースをbとスラッシュ(/)の組み合わせとして表現していました。 UnicodeにはU + 2422空白記号(␢)がありますが、ほとんどのフォントでは以前の表現の影響はありません。しかし、古い外観や新しい外観はあまり役に立ちません。オーバーレイを使用して古い方法とU + 2422を直接シミュレートします。

  • U + 0338:スペースを運ぶこれらのdobはありません。

  • U + 2422:これらは、空間を運ぶためのかなり良い仕事をしません。

最新の解決策は、U + 2E31ワードセパレータのミドルドット(⸱)またはU + 00B7ミドルドット(・)を使用することです。 1つ目は推奨され、2つ目は幅広いフォントをサポートしています。

例:

  • スペースを表示するためのかなり良い仕事。 (U + 2E31)
  • スペースのかなりの良い仕事。 (U + 00B7)
  • A⸱pretty⸱good⸱job⸱of⸱displaying⸱a⸱space.(U + 2E31等間隔)注意
  • A·pretty·good·job·of·displaying·spaces.(U + 00B7等間隔)

過去のメモ、使用法、その他の代替案については、 https://en.wikipedia.org/wiki/Interpunct および https://en.wikipedia.org/wiki/Whitespace_character を参照してください=(Overview/Definition and ambiguity/Unicode/Substitutesに埋め込まれています)。


私が正しく理解している場合、アプリケーションはテキストをキーストローク(またはテキストと特殊キー)として表示しています。その場合、U-2423の場合:

  • Aprettygoodjobofdisplayingkeys.

  • A可愛い良いジョブdisplayingkeys。

U-23B5の場合:

  • Aprettygoodjobofdisplayingkeys.

  • A可愛い良いジョブdisplayingkeys。


注意 一部の等間隔フォントでは、幅が異なるグリフです。

30

色は使えますか?ウィキペディアでは、文字を表示するために水色のボックスを使用しています。

enter image description here

ただし、2色に制限されている場合は、次のことをお勧めします。

  • ˽⎵⎴-ボタンを表すためのレターシェルフ、ブラケットの下またはブラケットの変更
  • ⬚◌-空を表す点線の円または正方形
  • ???? ???? ???? -コメディオプション。
17
PixelSnader

&ブランク; ␣

Wikipedia は、この目的のために次の文字をリストします。

Unicode space-illustrating characters (visible)  

Code    Decimal  Name                  Block             Display   Entity  
U+00B7  183      Middle dot Basic      Latin             ·         ·        
U+237D  9085     Shouldered open box   Misc Technical    ⍽         -
U+2420  9248     Symbol for space      Control Pictures  ␠        -
U+2422  9250     Blank symbol          Control Pictures  ␢        -
U+2423  9251     Open box              Control Pictures   ␣        ␣

Jukka Korpela(「Unicode Explained」の作者)は website を持っています。

可視スペース

スペースのシンボルとして使用できるグラフィック文字がいくつかあります。可視スペースと呼ばれることもありますが、スペースではなく、取扱説明書のスペースの様子や本文の説明などに使用される可視表記です。

次の表に、いくつかの記号を、実用性の高い順に示します。それらの形はフォントによって異なります。特に最後のものはかなり異なります。

 ␣   U+2423  OPEN BOX
␢   U+2422  BLANK SYMBOL
␠   U+2420  SYMBOL FOR SPACE

記号には、この目的のために初期のコンピュータプログラミングで使用されてきた長い歴史があります。プログラマーがコーディングカードに手書きし、パンチカードマシンのオペレーター(タイピングプールのようなもの)にスペース文字を示しました。

␣␣を使用します特に、このような明らかに関連する名前のHTMLエンティティがあるためです。

13
RedGrittyBrick

常に等幅フォントを使用でき、スペースは文字サイズのギャップで示されます:)。すべてのスペースを強調表示できます(例:<mark>&nbsp;</mark>)、CSSルールを設定して適切な色にします。

4
Algy Taylor

このページのURLを見てください。タイトルの単語の間のスペースはダッシュに置き換えられます。その直感的で読みやすく、使い慣れています。

3
michael.quiapos

私は Eclipse の空白文字に慣れています。これは、コードの書式設定で空白を表示するために使用されます。

  • スペース:U + 00B7 "中点":・
  • タブ:U + 2192「右向き矢印」:→

可能であれば、空白文字を通常のテキストよりも明るい色で表示すると、空白文字であることを強調できます。たとえば、通常のテキストが黒の場合は、灰色を使用します。

3
user44517

ニュージーランドの大学でテクニカルライティングを学んでいたとき、家(Unicode番号:U + 2302、HTMLコード:&#8962)またはアップトライアングル(Unicode番号:U + 25B3、HTML)を使用するように教えられました-コード:&#9651)スペースを示します。

Set-ExecutionPolicy⌂Unrestricted

Set-ExecutionPolicy△Unrestricted
2

上記のように、従来のプログラマーのブランクは小文字のbであり、スラッシュが上に付いています。これらは、プログラマーから使用されているプログラミング言語に慣れておらず、明確な入力が必要なキーパンチオペレーターに渡された手書きのコーディングシートで使用されていました。

これは、Webページでは、小文字のb、左マージンのスタイルである-.4emを指定するスパンタグ、フォワードスラッシュ、エンドスパンタグを順に入力することで表すことができます。

(CSSクラスを使用すると、入力を節約でき、通常はより良い方法です)。

Emを測定単位として使用すると、フォントサイズが変更された場合に文字をスケーリングできます。

0
Chris Beall