The shy tag—this little tag that allows you to decide where to break up long words when the screen gets too narrow. I don’t know why it took me such a long time to come across any mention of it, but it is probably because it is shy, and it is trying to hide.
How is shy different from simply adding a dash?
Shy means soft-hyphen, and what it does is it dynamically hyphenates a long word where you put the tag, if needed, and un-hyphenates it when not needed.
When is a shy tag useful?
It is not something you need every day, but it is really useful in certain situations—especially if you want to control your page down to the smallest detail. If you have a long word that is important to your site—say your site title for example—you should definitely make sure it breaks in the right place.
I once translated a page to Swedish, and got the following word on the front page: “Formgivningsagenturen”. Obviously it hampered the design of the mobile site because it was too long, and shy came to my rescue. I put the tag into the word like this: “Formgivnings­agenturen”, and then the word broke exactly where I wanted it to. At least in modern browsers (which we should force everybody to use).
Yes, it works for WordPress titles too
I have used it in the title field of WordPress posts before with great success—especially when using themes that feature large words. I also recommend using it in my article How to Perfect Titles, from the Old Newspaper WordPress Theme documentation.
The only thing to remember is that if you export posts using the WordPress exporter, and import to a new site, all your shy tags will unfortunately be lost.
If you use the shy tag in WordPress titles, they will be lost during export/import!
I am happy that this change is finally taking shape. It was one of the challenges for us responsive designers that tend to lean towards being a control freak.
