Comment afficher au mieux un caractère despace vide?

Une application Web que jécris distingue les caractères individuels trouvés sur un clavier traditionnel. Jai une zone très limitée dans laquelle le caractère peut être affiché (qui est essentiellement la largeur dun caractère W dans la police que jutilise), ce qui signifie que je ne peux pas afficher le mot « espace » ou « espace vide ».

Comment puis-je afficher au mieux le caractère despace vide?

Jai essayé quelques options, mais je ne sais pas si elles pourraient prêter à confusion:

  • Exemple 1 Utilisation du soulignement. Cela ressemble un peu trop au caractère de soulignement.
  • Exemple 2 Le symbole de lespace (␠ (␠)). Je ne savais même pas que cela existait avant de commencer à chercher pour les réponses à cette question moi-même, donc je ne suis pas sûr que cela soit largement reconnu.
  • Exemple 2 Une légère bordure inférieure dans une couleur différente.
  • Exemple 3 Un caractère de bloc (█ (█)) comme celles utilisées dans un terminal pour représenter le curseur.
  • Exemple 4 Un espace vide sans style appliqué.

Je suppose que cela vaut la peine de noter que cest uniquement à des fins daffichage; lutilisateur na pas dinteraction avec le personnage autre que de reconnaître quil est présent lors de la lecture de la page (donc je ne demande pas Quel caractère puis-je utiliser pour représenter la barre despace ? ).

Commentaires

  • Question fortement liée: Est le point du milieu la meilleure façon de signifier un espace?
  • Tous les caractères vont-ils être séparés visuellement? Autrement dit, sont-ils tous des cases séparées dans lesquelles se trouve le personnage? Si tel est le cas, je ‘ d utiliser simplement aucun style, sauf si vous avez une raison pour laquelle une seule case vide signifie autre chose (comme aucune entrée).
  • @ JamesDonnelly En fait, je nai pas ‘ suggérer le point du milieu. Jaurais peut-être dû établir un lien direct avec ma réponse, où je dis que middot nest pas le meilleur caractère et suggère un support  »  » ou crochet dindicateur vide comme Ben la ci-dessous.
  • Double possible de Quel caractère puis-je utiliser pour représenter la barre despace?
  • Je ne vois pas cela comme un doublon. Le doublon proposé demande comment représenter l’utilisation de la barre d’espace physique . Cette question demande comment représenter visuellement un caractère vide / espace.

Réponse

Interpunct

Nest pas intrusif et est à peine perceptible. Et les utilisateurs de Word qui le connaissent le reconnaîtront facilement, vous aurez donc une certaine cohérence externe.

Sur la base des commentaires, jai édité cette réponse pour noter quil est nécessaire de générer une différence entre le texte et interpunct donc jai utilisé une taille de police légèrement plus grande et changé la couleur du noir au bleu clair, donc cest moins perceptible. Il y a aussi quelques langues (comme le catalan) qui lutilisent comme caractère.

Il est important de noter que ce caractère est utilisé avant même lère informatique (la langue latine lutilisait).

Commentaires

  • beaucoup déditeurs de texte centrés sur la programmation lutilisent également pour les espaces de fin, bien que dans une couleur fanée.
  • Cest ce que Notepad ++ utilise lorsque vous lui demandez de rendre visibles des caractères invisibles (le bouton de pèlerinage).
  • Jaime aussi linterpuncture, mais comme le souligne Woodrow, une couleur fanée laide vraiment à être moins visible. Je pense que dans votre exemple de texte noir sur blanc, ils sont assez intrusifs.
  • Dans le texte, cela fonctionne très bien, mais dans une clé autonome, je ne suis pas sûr que ce soit aussi clair.
  • Ajout à @agweber poing. La décoloration des couleurs est également importante, car certaines langues utilisent ce symbole dans leur grammaire (par exemple, catalan; il · lusi ó).

Réponse

Mon accès a toujours été un blanc, ␣ (␣) ou le caractère de sous-crochet ⎵ (⎵), qui est plus large . Vous pouvez les voir ici sur w3.org . Jai utilisé un tas de sous-crochets dans mes cours de programmation pour montrer lespace dans la sortie du programme.

Par exemple These␣do␣a␣pretty␣good␣job␣of␣conveying␣a␣space devient:

exemple avec un espace vide

Assurez-vous que vous utilisez une police qui implémente les glyphes Unicode afin quelle ne se casse pas si le système des utilisateurs ne les a pas, ou cela pourrait ressembler à:

Exemple avec une police ne contenant pas les glyphes] 2

Commentaires

  • Ces█do█pas█do█a█pretty█bon█job█of█conveying█a█space. imgur.com/Uj8fZeKl.png . Veillez à ne pas utiliser de caractères qui peuvent ne pas exister sur le système de lutilisateur ‘, car il sagit en fait dune application Web. Si vous suivez cette voie, veuillez inclure la police avec lapplication.
  • @Tyzoid Bien sûr! Si vous ‘ utilisez unicode, assurez-vous que la police que vous ‘ utilisez implémente ces glyphes. Cela étant dit, je ‘ ne suis pas sûr quil ‘ est déraisonnable dattendre que lutilisateur ‘ s systèmes pour avoir une police qui implémente tous les symboles Unicode. Par exemple, mon système sert ces glyphes à partir de STIX General.
  • @Ben Cela peut être le cas dans la plupart des cas, mais je pense quil est déraisonnable de supposer que les utilisateurs ‘ ont tous les symboles Unicode disponibles. Le mien ne ‘ t, comme en témoigne la capture décran de votre réponse. (Aussi, pour les gens comme moi, pouvez-vous inclure une capture décran de ce à quoi le texte devrait ressembler?)
  • Lautre avantage est que vous pouvez voir où vous avez plusieurs caractères despace dans une ligne . Ie vous vous dites quil y a 4 caractères ici: ⎵⎵⎵⎵ et trois ici: ⎵⎵⎵, beaucoup plus facile quici: ____ vs ___
  • Il vaut également la peine de dire que ceux-ci ne sont pas ‘ t apparaissant sur lapplication Android SE.

Réponse

Réponse courte

Pour représenter une barre despace dun clavier, U + 23B5 Crochet carré inférieur (normal ⎵ bold monospace ). Comme alternative, U + 2423 Open Box (␣). Dans le langage HTML, ⎵ et &blank, respectivement. Pour représenter des espaces dans le texte, utilisez linterpunct, U + 2E31 Word Separator Middle Dot (⸱) ou U + 00B7 Middle dot (·) comme alternative.

Répétition et autre ponctuation:

  • U + 2E31: ⸱⸱⸱⸱Quatre⸱espaces⸱avant, ⸱maintenant⸱⸱deux, ⸱un⸱à la fin.⸱
  • U + 00B7: ···· Quatre · espaces · Avant, · maintenant ·· deux, · un · à · la · fin. ·
  • U + 23B5: ⎵⎵⎵⎵Quatre⎵espaces⎵avant, ⎵maintenant⎵⎵deux, ⎵un⎵at ·end .⎵
  • U + 2423: ␣␣␣␣Quatre␣espaces␣avant, ␣now␣␣two, ␣one␣at␣end.␣

Œuvres mono-espacées mieux:

  • 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.␣

Réponse longue

Pour la barre despace, U + 23B5 Crochet carré inférieur, HTML ⎵ () est bien parti. Cest un symbole utilisé dans les claviers et les claviers virtuels des téléphones portables, mais avec une faible couverture de police. U + 2423 Open Box, HTML &blank (␣) était mieux pris en charge, mieux avec les autres ponctuation, mais est moche isolément: vs .

La représentation visuelle des espaces dans le texte est une bête plus diversifiée. Dans lancien temps de la console, les manuels représentaient les espaces comme une combinaison de b et dune barre oblique (/). Il existe un Unicode pour cela, U +2422 Symbole vide (␢), mais sans le même impact de lancienne représentation dans la plupart des polices. Mais lancien look ou le nouveau naide pas beaucoup. Utilisation de superpositions pour simuler les anciennes méthodes et U + 2422 directement:

    ␢a␢space.

Une solution moderne consiste à utiliser le point central du séparateur de mots U + 2E31 (⸱) ou U + 00B7 au milieu point (·). Le premier est conseillé, le second a une large prise en charge des polices.

Exemples:

  • Un⸱joli⸱ bon⸱ travail⸱despaces⸱daffichage. (U + 2E31)
  • Un · assez · bon · travail · daffichage · des · espaces. (U + 00B7)
  • A⸱pretty⸱good⸱job⸱of⸱displaying⸱a⸱space. (U + 2E31 mono espacé) note
  • A·pretty·good·job·of·displaying·spaces. (U + 00B7 mono espacé)

Pour des notes historiques, des utilisations et dautres alternatives, voir https://en.wikipedia.org/wiki/Interpunct et https://en.wikipedia.org/wiki/Whitespace_character (enterrés dans Présentation / Définition et ambiguïté / Unicode / Substituts).


Si je comprends bien, votre application affiche du texte sous forme de touches (ou de texte et de touches spéciales).Si tel est le cas, avec U-2423:

  • A p r e t t y g o o d j o b o f d i s p l a y i n g k e s .

  • A joli bon travail de affichant les clés .

Avec U-23B5:

  • A p r e t t y g o o d j o b o f d i s p l a y i n g k e y s .

  • Un joli bien job sur affichant les clés .


note Dans certaines polices mono espacées, cest « un glyphe de largeur différente!

Commentaires

  • Il y a U + 2422 Symbole vide, comme on le voit dans plusieurs autres réponses.
  • Merci, jai modifié pour le mentionner. Je nai pas trouvé cela auparavant car le nouveau rendu de  » b slash  » (ou  » b solidus « ) nest pas pareil à lépoque des machines à écrire. Mon Dieu, je me sens vieux maintenant.
  • Je suppose que Lucida Sans Unicode (des polices répertoriées dans fileformat.info) correspond le mieux à vos attentes .
  • PS: U + 2E31 est sémantiquement correct, mais mal supporté et (si cest le cas) ressemble généralement à U + 00B7, qui peut avoir un comportement de saut de ligne moins souhaitable mais est disponible universellement. U + 2027 a également la même apparence (peut-être positionné un peu plus haut) mais ce nest pas le bon caractère pour le travail, car il joint les mots autour de lui – cest pour les dictionnaires. U + 2024/5 sont un et deux points sur la ligne de base, ce qui peut être meilleur que U + 2026 ou période standard U + 002E.

Réponse

Pouvez-vous utiliser Couleur? Wikipedia utilise des cases bleu clair pour afficher les caractères:

entrez la description de limage ici

Mais si vous « êtes limité à deux couleurs, je vous suggère celles-ci:

  • ˽ ⎵⎴ – Modifier létagère à lettres, le sous-crochet ou le sur-crochet pour représenter le bouton
  • ⬚ ◌ – Cercle ou carré en pointillé pour représenter le vide
  • 👽 👾 🚀 – Une option de comédie.

Commentaires

  • Je ne suis pas sûr que ce soit une bonne idée.
  • @PierreArlaud Je nai ‘ même pas mentionner cette merde.
  • @PierreArlaud Votre idée est pleine de merde! Nous avons ri de nos 💩 producteurs, quand nous ‘ lavons lu.
  • avec la couleur, vous pouvez ‘ t montrer facilement combien despaces entre les mots quand il y en a plusieurs consécutifs

Réponse

& vide; ␣

Wikipedia répertorie les caractères suivants à cet effet:

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 (auteur de  » Unicode expliqué « ) a un site Web qui a ceci à dire:

Espaces visibles

Certains caractères graphiques peuvent être utilisés un symbole pour un espace. Bien que parfois appelés espaces visibles, ce ne sont pas du tout des espaces mais des notations visibles utilisées pour indiquer lapparence des espaces dans les manuels dinstructions et les descriptions de textes.

Le tableau suivant répertorie certains symboles, par ordre décroissant par utilité pratique . Leurs formes varient selon la police; surtout le dernier varie beaucoup.

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

Le symbole ␢ a une longue histoire dutilisation à cet effet dans la programmation informatique précoce. Il a été écrit à la main sur les feuilles de codage par les programmeurs pour indiquer un espace aux opérateurs de machines à cartes perforées (qui étaient comme un pool de frappe).

Jutiliserais ␣ & vide; dautant plus quil existe une entité HTML avec un nom aussi pertinent.

Commentaires

  • Donc, sil y a des symboles pour afficher lespace, y a-t-il des symboles pour afficher des symboles despacement?

Réponse

Vous pouvez toujours utiliser une police à espacement fixe, lespace serait alors indiqué par un espace de la taille dun caractère :). Vous pouvez mettre en surbrillance chaque espace (par exemple <mark>&nbsp;</mark>), et définir des règles CSS pour en faire la couleur appropriée.

Réponse

Regardez lURL de cette page. Les espaces entre les mots du titre sont remplacés par un tiret. Cest intuitif, lisible et familier.

Commentaires

  • Le problème est que le - ressemblera à un -!
  • Ce sont des tirets (U + 2011). Les tirets sont (en dash, U + 2013) et (em dash U + 2014) . De plus, certaines URL utilisent un symbole plus, + (U + 002B), tandis que dautres écrivent clairement %20 (U + 0020 est le Caractère Unicode pour lespace). Il sagit du codage en pourcentage, une partie de lensemble dURI.

Réponse

Je suis habitué aux espaces blancs de Eclipse « , qui sont utilisés pour afficher les espaces dans le contexte du formatage du code.

  • Espace: U + 00B7 « point du milieu »: ·
  • Tabulation: U + 2192 « flèche vers la droite »: →

Si vous le pouvez, afficher des espaces dans une couleur plus claire que le texte normal permet de souligner quil sagit de caractères despacement. Par exemple, si le texte normal est noir, utilisez le gris.

Commentaires

  • Le point du milieu est la meilleure solution pour lespace, mais pour la tabulation, cela prend plusieurs colonnes sur la plupart des polices à espacement fixe. Je préfère le petit triangle noir pointant vers la droite (U + 25B8) qui peut être combiné avec le point du milieu sur vim pour afficher les onglets.

Réponse

Lorsque japprenais la rédaction technique à luniversité ici en Nouvelle-Zélande, on nous a appris à utiliser une maison (numéro Unicode: U + 2302, code HTML: & # 8962) ou un triangle vers le haut (numéro Unicode: U + 25B3, code HTML: & # 9651) pour indiquer les espaces.

Set-ExecutionPolicy⌂Unrestricted Set-ExecutionPolicy△Unrestricted 

Commentaires

  • euh … Jai vraiment du mal à trouver lespace là-dedans. Cela ressemble trop à un caractère, donc je dois lire le mot deux fois pour même diviser les mots au bon endroit …
  • @Falco, moi aussi. Je suppose que cela dépend de la police choisie .
  • Jai vu quil était utilisé pour afficher un séparateur de colonne (ou tabulateur), mais pas pour les espaces inter-mots normaux.

Réponse

Comme mentionné ci-dessus, le blanc du programmeur traditionnel est une lettre b minuscule, superposée par une barre oblique. Celles-ci ont été utilisées sur des feuilles de codage manuscrites transmises des programmeurs à des opérateurs de frappe qui ne connaissaient pas le langage de programmation utilisé et qui nécessitaient donc une entrée non ambiguë.

Sur une page Web, cela peut être représenté en entrant, dans lordre: une lettre b minuscule, une balise span qui spécifie un style margin-left de -.4em, une barre oblique, une balise end span

(Lutilisation dune classe CSS permettrait de gagner du temps et est généralement une meilleure pratique).

Utiliser em comme lunité de mesure permet au caractère de se mettre à léchelle si le fo nt taille est modifiée.

Réponse

Je ne prétends pas que cest supérieur, mais cest une approche qui peut être utilisée: pour le texte qui est à afficher sous forme de caractères (pas une image) sur un écran (non imprimé): utilisez simplement la chaîne réelle, avec des espaces si nécessaire, et dites à lutilisateur de positionner le curseur sur la chaîne et dutiliser une touche fléchée pour déplacer et compter les espaces (je fais cela en tant que lecteur lors de la vérification de certaines chaînes et du comptage des longueurs). Cela présente lavantage que la chaîne peut être copiée et collée, et évite tout problème de rendu des caractères et de prise en charge des jeux de caractères.

Par exemple :

Les dates peuvent être saisies avec plusieurs espaces, comme dans cet exemple, qui comporte 2 espaces entre chaque élément « 25 décembre 2016 ». Placez le curseur sur la chaîne et utilisez les touches fléchées droite et gauche pour lexplorer. Vous pouvez la copier et la coller dans le programme.

(Remarque: ce site remplace plusieurs espaces entrés par un seul donc, ironiquement, t son exemple ne fonctionne pas ici. Jai entré 2 espaces consécutifs là où je lai dit.)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *