The Shy Tag

Have a comment?

Your email address will not be published.

You might have left one of the fields blank or be posting too quickly.

Thanks for your comment. We appreciate your response. Reload the page to see your comment.

Please wait a while before posting your next comment.

What is on your heart?

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: “Formgivnings­agenturen”. 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.

This one was written by Benjamin Antoni

I am a Brand Strategist with 10+ years of broad design experience, where UX, web and logo design have been my main focuses. My most comprehensive experience is having built the Red Hat Factory brand from scratch, but I also work part time with helping other brands find their identity and grow from there.

Mail him

Branding

Hand-drawn Branding VS Digital Design

An old rugged brand calls for hand-drawn branding.

Branding

Why Brands Fail (And How to Avoid It)

You'd love if I just handed you the answer to why brands fail, wouldn't you? This is why your brand fails! It is of course a very complex questions. But after working with brands of all sizes for over 10 years, I believe I have some ways to clue you in. The keyword in a…

Branding

The Importance of Branding in Marketing: The Definite Guide

Marketing without branding is non existent. The brand writes itself unless you take control over it and decide where it goes.

Branding

5 Elements a Quality Branding Kit Should Include

While a branding kit can include anything that you deem necessary to anchor the tone of the brand, there are some key elements that probably are worth including in any quality branding kit. What components we will discuss: Graphic assets LogoAccent ColorTypeface Story assets Vision StatementGuidewordsValues #1 Your branding kit should include a logo While…

Branding

How to Make a Branding Kit

A branding kit can be so much. How do you go about making one?