Hyphenation
means that- splitting words to improve the layout of the paragraphs.
How
can you achieve proper word wrapping within the elements with a
dynamic width? There is a fluid layout available with a dynamic width
in order to deliver the responsive user experience. That means no
element is having a fixed width instead of the width is defined as
percentages. Undoubtedly, it causes major issues while designing, and
“word wrapping” is one of the major problems. Initially, the
designers do add word-wrap:
break-word to the
element, and it should automatically do the wrapping. Nonetheless, in
actuality, it is not working automatically.
If
you have an element with a dynamic width word-wrap:
break-word, and this is
not having any effect. Nowadays, the browser does not use the
calculated width in order the enforce the wrapping. Instead of that
they seem to ignore the declaration.
The
concept “Hyphenation” is usually needed when the width of the
column or the page is quite narrow in order to accommodate the line,
allowing paragraphs to align with proper spacing. It could also
minimize the rivers from appearing and as a result of breaking apart.
In order to compare, let us dive into the terminology-
We
have been able to hyphenate paragraph in print media for years, but
now we are able to hyphenate paragraphs using new CSS3 property,
which are called as “hyphens” with a lack of support from the
browsers. At the times of writing, the new property “hyphens”
that is only supported in Internet Explorer 10, Safari 5.1+ &
Firefox 6 with the prefix, and surprisingly it has not been
implemented in Chrome.
When
we talk about it usages, the property hyphens
accept the three values
i.e. none,
manual
or auto.
The auto value will
let the web browsers hyphenate the paragraphs automatically when it
is proper. The default one is manual whereas you can set hyphens
through ­ auto.
There
is also one thing that you have to notice in order to use that is you
have to define a lang-
attribute on an element, which carries text that should be
hyphenated.
With
the use of manual
value, as the content author need to specify manually how the word
should break in order to insert ­
notation in between the
word.
Wrapping
Up- If the feature supports all
the web browsers, surely that paragraph on the web will be much
better displayed. Until we have got an alternative method to using a
Javascript library, which is called as Hyphenator, which has better
compatibility & work in diverse languages.
