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
Here’s a Pen I created ages ago that will help you do that:
There is also a quick trick for doing it from the browser console:
copy('u{200B}')via:
And for yet another way that may appeal to you, a bookmarklet!
Copy & Paste concern
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.
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
fandifrom joining in Roboto font.How is this different from
?That’s a space…. with… width
is a non-breaking space. Well, that looks like a space but don’t allow the line break on it. As an example, let’s say you need to follow some guideline that disallows line-breaks between article and nouns, then you can use it. In fact, I placed one between every article and noun in this paragraph.In the other hand a zero-width space don’t looks like a space, but is considered one. Besides the example from the article I often use it to format Markdown: you can’t apply formatting to half of a world, as it needs to start or end close to spaces in Commonmark, but you can workaround that using a zero-width space.
is visible, it’s the non-breaking space. Normally if you write 3 spaces in a row, the browser will display only one. Except if you use $nbsp; , then it renders all three.
nbsp stands for Non-Breakable space, which is a real space with a width but it will prevent two words of being split (e.g. at the end of a line)
The zero-width space, as shown, looks like an invisible character
That’s not a zero-width space, but an actual space. The examples above for for spaces that don’t take up the space of a character.
The NBSP has size if regular space and prevents line break on either side if NBSP.
The ZWS or ZWSP has width of zero (totally invisible) and allows line break similar to regular space.
Then there exists ZWJ or zero width joiner character that also has zero width but disallows line break on either side. In theory you wouldn’t need NBSP at all because ZWJ + space + ZWJ is the same thing. However, due historical reasons we have more codepoints than logically required.
More specifically, that’s a space with width where the text on either side will never break (wrap). Useful to prevent typographical orphans (single words on a new line at the end of a heading out paragraph). Annoyingly, it’s also how WYSIWYG editors do double spaces for some reason.
still renders a space (that is marked as non-breaking).The zero-width space on the other hand is technically a space, but rendered with no width. You won’t be able to see it. If you place it between two characters, they are “stuck” together as if you didn’t enter a space at all.
is a non breaking space – it adds a space no matter what. If you had ten of them in a row you’d create a big space.This is the opposite, there’s no space at all. Ten of them would create no space, a 0px gap.
Shift + Option + Space should produce a ZWS. Tim Apple, make it happen.
I’ve always used KCharSelect for this kind of thing. It makes all characters very searchable by name, code(s), and it runs just as well on Windows as it does on Linux.
It is practical in languages that join characters together like Arabic or Persian that’s zwnj, zéro-width non-joiner.
With space: دانه ها
With semi-space: دانهها
نسیم and نسیم
There are several good uses for them. They can be very handy when you have to show a long URL – ZWSes let you break it onto multiple lines in sensible places if required.
It also enables a handy hack in HTML email that gives you more control over your preview text (or preheader text) in the inbox—that bit of copy below your subject line. Litmus has a good article on it, though the code formatting leaves a bit to be desired.
Great article. I’ve found myself with this exact same use-case. It’d be nice if Twitter provided a way to “unlink” links but I suppose that would add an additional layer of complexity for Twitter APIs which depend on certain formats like @handle and #buzzword to be automatically interpreted as links.
I used to use zero-width spaces for these uses but found that often enough, the zero-width space would break onto a new line, thereby interrupting the flow of text in my tweet.
I evaluated a few alternatives, including zero-width non-breaking spaces but found that what tended to work better in all scenarios was actually the “zero-width joiner” character which the browser almost interprets as a merging of the two strings joined together, but Twitter will respect it and ignore it from its linking mechanism.
I once had to debug an issue on a app I was one of the devs workin on
it was a CMS like system,
The writers had an issue, of a mysterious linebreak kept appearing mid word..
And they were insistent that it had to be fixed
I’m not sure if it was luck or persistence but I/we found a zero width space had worked its way into the copy.
The only way I could prove it was so by using
curlthen piping the result intocatwith some obscure flag that displays invisible characters..The only conclusion we could come up with was that the writers copied text from Word used
Fun times..
It has got to be my all time most obscure bugs
How do you embed codepen panel thing in your article?!
Please tell me. I want to show such examples of codepen in my articles too. [ In Blogger. com]
When you’re looking at any public Pen on CodePen, click the Embed button in the footer and get the embed code.
https://codepen.io/features/embeds
I use
&# 8288;(space added so you can see it) all the time, most commonly for footnotes and em dashes. Having footnotes fall to the next line on mobile without accompanying text is less readable and visually unappealing. Using a zero-width space is also way easier than the CSS alternative of wrapping text in a and setting it to white-space: nowrap.