ZOMDir > Blog

Sunday, 17 May 2015

The power of the Zero Width Space

Recently I discovered that besides the Non breaking Space, there is also a Zero Width Space

A Zero Width Space works similair to the Soft Hyphen. Instead of adding a visible hyphen where the string is broken across lines, the Zero Width Space adds virtualy nothing.  

The Soft Hyphen is useful when you want to control where normal words might be broken across lines. 

Use the Zero Width Space when you don't want extra visible hyphen in your string. Since I discovered the Zero Width Space I use it in URL's. This way, long URL's are shown perfectly fine on small screens too. 


Zero Width Space in URL's

In URL's I add a Zero Width Space:

  • After each ampersand '&';
  • After each sledge '/';
  • After each egual sign '=';
  • After each underscore '_';
  • After each plus signe '+';
  • Before each percentage sign '%';
  • Before each period '.'
This way an URL might be shown as follows:

http://example
.zomdir.com/
this_is_a_fake_
directory/and-
this-one-is-fake-
too/index.php?
inputfromuser=
wow%20this%20
is%20a%20handy
%20code
 
In my opinion is the Zero Width Space that useful that I wonder how I missed it before. Anyway from now on I'm a fan of the Zero Width Space.

Hans

By the way. The code for a Zero Width Space in HTML is: ​

--
ZOMDir.com is a dynamic directory and a wiki
Everyone is able to add a link in 10 seconds

To learn more view this Slideshare presentation