1. Skip to navigation
  2. Skip to content
  1. Skip to content
  2. Back to header
Featured image for Writing for Responsive Sites

Writing for Responsive Sites

Chances are the next big change to the web will be responsive sites, as users habits change and expand to include more handheld devices, the web needs to cater for other screen sizes beyond the old desktop or laptop. Responsive sites simply remove the need to serve multiple sub-sites or front-ends to users. That said, text flow could be the major hindrance to this, do not fear, there are options and I want to cover them.

Introducing the Soft Hyphen

Hyphenation, the act of breaking a word into two at the end of a line to avoid indentations at the end of a line; when the words are large enough even that becomes impossible with full justification. There are two means to do this, manually, ensuring the best accuracy but perhaps foregoing coverage, and automatically.

Method 1: Manual

The best way to ensure it works as you expect is to do it manually; if you have some means of using HTML input then switch to it, you can then add the soft hyphen within your words where you see fit via writing ­ – allowing the browser to break that word if necessary at the specified spot; the downside is this requires time and effort to do.

­­­­­­­­For windows users, you can use Alt+0173. For Linux users, hold down Ctrl+Shift, press U (while still holding down Ctrl+Shift) followed by 00AD (Zero, Zero, A, D); alternatively written as U+00AD. Note that neither of these may work as intended and the safest way to ensure its presence is to use the HTML as written above in the previous paragraph.

Minor note: U+00AD is shorthand, U for Unicode + the address of the character within the Unicode standard. The address is hexadecimal; it is worth noting that hexadecimal digits are 0 to 9 and A to F (effectively 0 to 15). This should help avoid confusion between 0 and O as the letter isn’t used in a hex number.

Method 2: Automatic

Avoiding all the time consumption and trouble of combing through a document to add or change hyphens, that may or may not appear for end users, you could use the computing power of the end user via JavaScript; afterall, the text flow is something the end user sees based on their screen. In comes Hyphenator.JS, it is worth noting before I go any further that most frameworks likely already have a plug-in for Hyphenator, so look it up to make sure you aren’t retreading commonly covered ground; WordPress has the Hyphenator plug-in for instance.

Hyphenator works by examining documents and applying the rules of hyphenation; including soft hyphens where they could be beneficial. It doesn’t determine if they should or should not be used, that functionality is still a part of many modern browsers, if simply under-utilised.

The downsides are essentially simple:

  • The user may have aged hardware and/or software, this may result in slow loading times for the site or the text flow moving as soft hyphens are inserted.
  • This method may result in inappropriate hyphenation; whereby one normal word becomes either one or two potentially humorous words.


Soft hyphenation is beneficial, worth knowing, and definitely worth implementing on responsive sites. While automation on the client-side may have its issues, it avoids the need to do those calculations on the server and reduces the amount of space required in the long-run, while also utilising more client-side horse-power (most smart-phones should be capable of handling this, for example).

JavaScript is also constantly improving, while old browsers may be insecure or locked down; simply put those sites will still be served content, generally speaking those particular browsing habits will likely go unharmed as long as the site doesn’t base its core around JavaScript.

No comments yet

Be the first!

Leave a Reply

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

Validation * Time limit is exhausted. Please reload the CAPTCHA.

  1. Back to header
  2. Back to navigation
  3. Back to content

© 2011-2013 Tower Designs