The Shy Tag

Have a comment?

Your email address will not be published. Required fields are marked *

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

Reaching about 10 years experience developing for the web, and have been doing various forms of graphic design since he discovered a copy of Photoshop in his brother's room a long long time ago. Mail him if you want work done.

Mail him

News

Update 2.5, Old Newspaper WordPress Theme is Out!

In the most visual update for a very long time, Old Newspaper is expanded into eight distinct style options, and the option for using handwritten typefaces. Along with all these style options comes Boxed Mode, an optional function that allows you to add a small margin to the theme on desktop. This makes the newspaper…

Tips & Tricks

How to Increase Instagram Engagement in 2019

Let me break it to you at once. The keyword is engagement. We are not looking for just likes or comments. We are on the search for genuine human interaction. Just like in real life. A lot of the problem with Instagram engagement in 2019, is that people are so tired of spam. Tired of…

News

The “M”

Around the same time as we released the new brand coloring for MacLaren Barbers in 2017, we ran a side project that turned out quite nice. Project "M". Finally I had time to write some words about it. Ben – Mr. MacLaren Barbers – was about to start releasing more clothing products, starting with baseball…

News

7H Batterier Brand Development and Website

An old battery store, packed with as much experience as there are batteries, gets a new owner and needs to build a fresh brand. We are contacted, and the rest is history.

Tips & Tricks

5 Tips For Working With a Digital Agency

Before starting a project, be it web design, a video or some branding work, there are some things you as a customer may do to make the process as swift and cost effective as possible.