Html zero width space

The Zero Width Space

They look identical, but have a look at what is rendered in the browser:

Page 1 Rendering

Page 2 Rendering

As you can see, there is a gap between “123” and “456” on page 2, but not on page 1.

What’s going on here?

This happened to me at work the other day.

For some reason, two pages which were meant to be almost identical, except for some text, were displaying differently. One had random white space separating some text, while the other didn’t.

Turns out, some how, a character called a “Zero Width Space” had gotten into the html file.

What’s the point of it?

The code &#8203 is the HTML code for the zero width space.

The zero-width space can be used to enable line wrapping in long words, when using languages that don’t use spaces to separate words.

How can you see an invisible character?

The space doesn’t show up in common text editors like Visual Studio/Notepad or even Notepad++.

I’m sure there’re text editors out there that can show you where those characters are, but an easy way is to paste the text into your browser’s URL and hit enter.

The browser converts it into the URL encoded form %E2%80%8B :

GitHub also shows the character when editing code:

If you’re getting strange white spaces in your webpage, always look out for this sneaky character in the DOM.

If you found this article helpful, please consider supporting me by buying me a coffee.

Источник

Zero Width Space ​

The symbol “Zero Width Space” is included in the “Format characters” Subblock of the “General Punctuation” Block and was approved as part of Unicode version 1.1 in 1993.

Unicode Name	Zero Width Space
Unicode Number	U+200B
HTML Code	​
CSS Code	\200B
Unicode Blocks	General Punctuation
Unicode Subblock	Format characters
Unicode Version	1.1 (1993)

Version	1.1
Block	General Punctuation
Type of paired mirror bracket (bidi)	None
Composition Exclusion	No
Case change	200B
Simple case change	200B

Encoding	hex	dec (bytes)	dec	binary
UTF-8	E2 80 8B	226 128 139	14844043	11100010 10000000 10001011
UTF-16BE	20 0B	32 11	8203	00100000 00001011
UTF-16LE	0B 20	11 32	2848	00001011 00100000
UTF-32BE	00 00 20 0B	0 0 32 11	8203	00000000 00000000 00100000 00001011
UTF-32LE	0B 20 00 00	11 32 0 0	186646528	00001011 00100000 00000000 00000000

All images of emoji and symbols on the website are for informational purposes, the rights belong to their authors and cannot be used for commercial purposes without their consent.

All symbol names are official Unicode® names. Code points listed are part of the Unicode Standard.

Источник

Zero Width Space (U+200B)

Zero Width Space is a whitespace Unicode character but with zero width and hence does not indicate a visible width or separation between two characters.

Shortcodes:

How to add Zero Width Space character in HTML?

To add the Zero Width Space character in HTML, you can use HTML code(decimal), HEX code, or HTML entity(named). Copy the available codes from the Shortcodes table and paste it in your HTML code.

For example: Zero Width Space​Character

The above code will show this result: Zero Width Space​Character

An HTML Entity(named) or HEX Code can also display the character in HTML.

How to add Zero Width Space character using CSS?

You can show Zero Width Space character using CSS by utilizing CSS shortcode or entity. Use :before or :after to insert symbol before or after an element.

.elementClass:after content: ‘\200B’;
>

• More Blank Characters
• Space (U+0020)
• No-Break Space (U+00A0)
• En Space (U+2002)
• Em Space (U+2003)
• Hangul Filler (U+3164)
• Three-Per-Em Space (U+2004)
• Four-Per-Em Space (U+2005)
• Six-Per-Em Space (U+2006)
• Figure Space (U+2007)
• Punctuation Space (U+2008)
• Thin Space (U+2009)
• Hair Space (U+200A)
• Narrow No-Break Space (U+202F)
• Medium Mathematical Space (U+205F)
• Ideographic Space (U+3000)

Источник

Zero-Width Space

The name zero-width space is antithetical, but it’s not without uses. In text, maybe you’d use it around slashes because you want to be sure the words are treated individually but not have any physical space around the slash: That’s pretty theoretical though—I’ve never once needed to do that. It might be useful in a long word to suggest that it can be broken there… but that’s also rare as we have the soft-hyphen ( ­ ) which is designed for that and leaves a typically appropriate hyphen at the break. What I have needed to do is exactly the opposite: trick a system into thinking a single word is two words. Like on Twitter, if I @username or #hashtag in the text of a tweet, those will be linked up respectively. But I don’t always want that. On CSS Twitter, I might want to refer to a @media query or show an #id-selector. Toss a zero-width space between the symbols and the text and I’m all set.

Get a zero-width space on your clipboard

The danger with the zero-width space is, well, you can’t see it. If someone were to, for example, copy your @media query using the zero-width space trick from a tweet, it won’t work in their code editor (because it will invalidate the rule) and it might be extremely confusing. For that reason, it’s probably good to avoid using it in anything that might be copied as a code example, but probably fine when explicitly trying to not autolink something.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Interesting to note that ctrl+F ignores the zero-width space in all major browsers (at least on Mac).

Some hack on using zero-width space: Disable shortcode (to show the shortcode markup as-is for presentation purpose or as usage example) → drawback, the result is not copy-paste friendly.
Disable font ligature. E.g. to prevent letter f and i from joining in Roboto font.

Источник