Soft hyphen in HTML wbr vs shy

Question

How do you solve the problem with soft hyphens on your web pages  In a text there can be long words which you might want to line break with a hyphen  But you do not want the hyphen to show if the whole word is on the same line   According to comments on this page  lt wbr gt  is a non standard  tag soup invented by Netscape   It seems like  amp shy  has its problems with standard compliance as well  There seems to be no way to get a working solution for all browsers   Which is your way for handling soft hyphens and why did you choose it  Is there a preferred solution or best practice    See related SO Discussion here

User · Answer

If you have bad luck and still has to use JSF 1  then the only solution is to use  amp  173    amp shy  does not work

User · Answer

There is an ongoing effort to standardize hyphenation in CSS3   Some modern browsers  notably Safari and Firefox  already support this  Here is a good and up to date reference on browser support   Once the CSS hyphenation gets implemented universally  that would be the best solution  In the meantime  I can recommend Hyphenator - a JS script that figures out how to hyphenate your text in the way most appropriate for a particular browser    Hyphenator    relies on Franklin M  Liangs hyphenation algorithm  commonly known from LaTeX and OpenOffice  uses CSS3 hyphenation where it is available   automatically inserts  amp shy  on most other browsers  supports multiple languages  is highly configurable  gracefully falls back in case javascript is not enabled    I ve used it and it works great

User · Answer

Unfortunately   amp shy s support is so inconsistent between browsers that it can t really be used   QuirksMode is right -- there s no good way to use soft hyphens in HTML right now  See what you can do to go without them   2013 edit  According to QuirksMode   amp shy  now works is supported on all major browsers

User · Answer

I suggest using wbr  so the code can be written like this    lt p gt             lt wbr  gt  lt  wbr gt          lt  p gt    It won t lead space between charaters  while  amp shy  won t stop spaces created by line breaks

User · Answer

Unfortunately   amp shy s support is so inconsistent between browsers that it can t really be used   QuirksMode is right -- there s no good way to use soft hyphens in HTML right now  See what you can do to go without them   2013 edit  According to QuirksMode   amp shy  now works is supported on all major browsers

User · Answer

I suggest using wbr  so the code can be written like this    lt p gt             lt wbr  gt  lt  wbr gt          lt  p gt    It won t lead space between charaters  while  amp shy  won t stop spaces created by line breaks

User · Answer

There is an ongoing effort to standardize hyphenation in CSS3   Some modern browsers  notably Safari and Firefox  already support this  Here is a good and up to date reference on browser support   Once the CSS hyphenation gets implemented universally  that would be the best solution  In the meantime  I can recommend Hyphenator - a JS script that figures out how to hyphenate your text in the way most appropriate for a particular browser    Hyphenator    relies on Franklin M  Liangs hyphenation algorithm  commonly known from LaTeX and OpenOffice  uses CSS3 hyphenation where it is available   automatically inserts  amp shy  on most other browsers  supports multiple languages  is highly configurable  gracefully falls back in case javascript is not enabled    I ve used it and it works great

User · Answer

This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery    function           fn breakWords   function          this each function            if this nodeType     1    return            if this currentStyle  amp  amp  typeof this currentStyle wordBreak      string                Lazy Function Definition Pattern  Peter s Blog            From http   peter michaux ca article 3556          this runtimeStyle wordBreak    break-all                   else if document createTreeWalker                Faster Trim in Javascript  Flagrant Badassery            http   blog stevenlevithan com archives faster-trim-javascript           var trim   function str               str   str replace    s s                    var ws     s              i   str length             while  ws test str charAt --i                return str slice 0  i   1                           Lazy Function Definition Pattern  Peter s Blog            From http   peter michaux ca article 3556             For Opera  Safari  and Firefox          var dWalker   document createTreeWalker this  NodeFilter SHOW TEXT  null  false            var node s c   String fromCharCode  8203             while  dWalker nextNode                 node   dWalker currentNode               we need to trim String otherwise Firefox will display              incorect text-indent with space characters            s   trim  node nodeValue   split     join c              node nodeValue   s                                     return this            jQuery

User · Answer

If you have bad luck and still has to use JSF 1  then the only solution is to use  amp  173    amp shy  does not work

User · Answer

The zero-width space entity can be used in place of  lt wbr gt  tag reliably on virtually every platform     amp  8203    Also useful is the word joiner entity  that can be used to prohibit a break   Insert between each character of a word  except where you want the break     amp  8288    With the two of these  you can do anything

User · Answer

Feb 2015 summary  partially updated Nov 2017   They all perform pretty well   amp  173  edges it as Google can still index of words containing it    In browsers   amp shy  and  amp  173  both display as expected in major browsers  even old IE     lt wbr gt  isn t supported in recent versions of IE  10 or 11  and doesn t work properly in Edge  When copied and pasted from browsers   tested 2015  as expected for  amp shy  and  amp  173  for Chrome and Firefox on Mac  on Windows  10   it keeps the characters and pastes hard hyphens into Notepad and invisible soft hyphens into applications that support them  IE  win7  always pastes with hyphens  even in IE10  and Safari  Mac  copies in a way which pastes as hyphens in some applications  e g  MS Word   but not others Find on page works for  amp shy  and  amp  173  on all browsers except IE which only matches exact copied-and-pasted matches  even up to IE11  Search engines  Google matches words containing  amp  173  with words typed normally  As of 2017 it appears to no longer match words containing  amp shy   Yandex appers to be the same  Bing and Baidu seem to not match either      Test it  For up-to-date live testing  here are some examples of unique words with soft hyphens      amp shy  - confumbabbl amp shy ication amp shy ism - confumbabbl shy ication shy ism                                                                                                                    confumbabbl shy ication shy ism                                                                                                                   confumbabbl shy ication shy ism     lt wbr gt  - donfounbabbl lt wbr gt ication lt wbr gt ism  This site removes  lt wbr  gt  from output  Here s a jsbin com snippet for testing     amp  173  - eonfulbabbl amp  173 ication amp  173 ism - eonfulbabbl  173 ication  173 ism                                                                                                                    eonfulbabbl  173 ication  173 ism                                                                                                                     eonfulbabbl  173 ication  173 ism    Here they are with no shy hyphens  this is for copying and pasting into find-on-page testing  written in a way which won t break the search engine tests    ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ  Display across browsers  Success  displaying as a normal word  except where it should break  when it breaks and hyphenates in the specified place   Failure  displaying unusually  or failing to break in the intended place    Chrome  40 0 2214 115  Mac    amp shy  success   lt wbr gt  success   amp  173  success Firefox  35 0 1  Mac     amp shy  success   lt wbr gt  success   amp  173  success Safari  6 1 2  Mac     amp shy  success   lt wbr gt  not tested yet   amp  173  success Edge  Windows 10    amp shy  success   lt wbr gt  fail  break but no hyphen    amp  173  success IE11  Windows 10    amp shy  success   lt wbr gt  fail  no break    amp  173  success IE10  Windows 10    amp shy  success   lt wbr gt  fail  no break    amp  173  success IE8  Windows 7   erratic - sometimes  none of them work at all and they all just follow css word-wrap  Sometimes  they seem to all work  Not yet found any clear pattern as to why  IE7  Windows 7    amp shy  success   lt wbr gt  success   amp  173  success   Copy-paste across browsers  Success  copying and pasting the whole word  unhyphenated   tested on Mac pasting into browser search  MS Word 2011  and Sublime Text    Failure  pasting with a hyphen  space  line break  or with junk characters    Chrome  40 0 2214 115  Mac    amp shy  success   lt wbr gt  success   amp  173  success Firefox  35 0 1  Mac     amp shy  success   lt wbr gt  success   amp  173  success Safari  6 1 2  Mac     amp shy  fail into MS Word  pastes all as hyphens   success in other applications  lt wbr gt  fail   amp  173  fail into MS Word  pastes all as hyphens   success in other applications IE10  Win7    amp shy  fail pastes all as hyphens   lt wbr gt  fail   amp  173  fail pastes all as hyphens IE8  Win7    amp shy  fail pastes all as hyphens   lt wbr gt  fail   amp  173  fail pastes all as hyphens IE7  Win7    amp shy  fail pastes all as hyphens   lt wbr gt  fail   amp  173  fail pastes all as hyphens   Search engine matching  Updated in November 2017   lt wbr gt  not tested because StackOverflow s CMS stripped it out   Success  searches on the whole  non-hyphenated word find this page    Failure  search engines only find this page on searches for the broken segments of the words  or a word with hyphens     Google   amp shy  fails   amp  173  succeeds Bing   amp shy  fails   amp  173  fails Baidu   amp shy  fails   amp  173  fails  can match fragments within longer strings but not the words on their own containing a  amp  173  or  amp shy   Yandex   amp shy  fails   amp  173  succeeds  though it s possible it s matching a string fragment like Baidu  not 100  sure    Find on page across browsers  Success and failure as search engine matching    Chrome  40 0 2214 115  Mac    amp shy  success   lt wbr gt  success   amp  173  success Firefox  35 0 1  Mac     amp shy  success   lt wbr gt  success   amp  173  success Safari  6 1 2  Mac     amp shy  success   lt wbr gt  success   amp  173  success IE10  Win7    amp shy  fail only matches when both contain shy hyphens   lt wbr gt  success   amp  173  fail only matches when both contain shy hyphens IE8  Win7    amp shy  fail only matches when both contain shy hyphens   lt wbr gt  success   amp  173  fail only matches when both contain shy hyphens IE7  Win7    amp shy  fail only matches when both contain shy hyphens   lt wbr gt  success   amp  173  fail only matches when both contain shy hyphens

User · Answer

The zero-width space entity can be used in place of  lt wbr gt  tag reliably on virtually every platform     amp  8203    Also useful is the word joiner entity  that can be used to prohibit a break   Insert between each character of a word  except where you want the break     amp  8288    With the two of these  you can do anything

User · Answer

Feb 2015 summary  partially updated Nov 2017   They all perform pretty well   amp  173  edges it as Google can still index of words containing it    In browsers   amp shy  and  amp  173  both display as expected in major browsers  even old IE     lt wbr gt  isn t supported in recent versions of IE  10 or 11  and doesn t work properly in Edge  When copied and pasted from browsers   tested 2015  as expected for  amp shy  and  amp  173  for Chrome and Firefox on Mac  on Windows  10   it keeps the characters and pastes hard hyphens into Notepad and invisible soft hyphens into applications that support them  IE  win7  always pastes with hyphens  even in IE10  and Safari  Mac  copies in a way which pastes as hyphens in some applications  e g  MS Word   but not others Find on page works for  amp shy  and  amp  173  on all browsers except IE which only matches exact copied-and-pasted matches  even up to IE11  Search engines  Google matches words containing  amp  173  with words typed normally  As of 2017 it appears to no longer match words containing  amp shy   Yandex appers to be the same  Bing and Baidu seem to not match either      Test it  For up-to-date live testing  here are some examples of unique words with soft hyphens      amp shy  - confumbabbl amp shy ication amp shy ism - confumbabbl shy ication shy ism                                                                                                                    confumbabbl shy ication shy ism                                                                                                                   confumbabbl shy ication shy ism     lt wbr gt  - donfounbabbl lt wbr gt ication lt wbr gt ism  This site removes  lt wbr  gt  from output  Here s a jsbin com snippet for testing     amp  173  - eonfulbabbl amp  173 ication amp  173 ism - eonfulbabbl  173 ication  173 ism                                                                                                                    eonfulbabbl  173 ication  173 ism                                                                                                                     eonfulbabbl  173 ication  173 ism    Here they are with no shy hyphens  this is for copying and pasting into find-on-page testing  written in a way which won t break the search engine tests    ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ  Display across browsers  Success  displaying as a normal word  except where it should break  when it breaks and hyphenates in the specified place   Failure  displaying unusually  or failing to break in the intended place    Chrome  40 0 2214 115  Mac    amp shy  success   lt wbr gt  success   amp  173  success Firefox  35 0 1  Mac     amp shy  success   lt wbr gt  success   amp  173  success Safari  6 1 2  Mac     amp shy  success   lt wbr gt  not tested yet   amp  173  success Edge  Windows 10    amp shy  success   lt wbr gt  fail  break but no hyphen    amp  173  success IE11  Windows 10    amp shy  success   lt wbr gt  fail  no break    amp  173  success IE10  Windows 10    amp shy  success   lt wbr gt  fail  no break    amp  173  success IE8  Windows 7   erratic - sometimes  none of them work at all and they all just follow css word-wrap  Sometimes  they seem to all work  Not yet found any clear pattern as to why  IE7  Windows 7    amp shy  success   lt wbr gt  success   amp  173  success   Copy-paste across browsers  Success  copying and pasting the whole word  unhyphenated   tested on Mac pasting into browser search  MS Word 2011  and Sublime Text    Failure  pasting with a hyphen  space  line break  or with junk characters    Chrome  40 0 2214 115  Mac    amp shy  success   lt wbr gt  success   amp  173  success Firefox  35 0 1  Mac     amp shy  success   lt wbr gt  success   amp  173  success Safari  6 1 2  Mac     amp shy  fail into MS Word  pastes all as hyphens   success in other applications  lt wbr gt  fail   amp  173  fail into MS Word  pastes all as hyphens   success in other applications IE10  Win7    amp shy  fail pastes all as hyphens   lt wbr gt  fail   amp  173  fail pastes all as hyphens IE8  Win7    amp shy  fail pastes all as hyphens   lt wbr gt  fail   amp  173  fail pastes all as hyphens IE7  Win7    amp shy  fail pastes all as hyphens   lt wbr gt  fail   amp  173  fail pastes all as hyphens   Search engine matching  Updated in November 2017   lt wbr gt  not tested because StackOverflow s CMS stripped it out   Success  searches on the whole  non-hyphenated word find this page    Failure  search engines only find this page on searches for the broken segments of the words  or a word with hyphens     Google   amp shy  fails   amp  173  succeeds Bing   amp shy  fails   amp  173  fails Baidu   amp shy  fails   amp  173  fails  can match fragments within longer strings but not the words on their own containing a  amp  173  or  amp shy   Yandex   amp shy  fails   amp  173  succeeds  though it s possible it s matching a string fragment like Baidu  not 100  sure    Find on page across browsers  Success and failure as search engine matching    Chrome  40 0 2214 115  Mac    amp shy  success   lt wbr gt  success   amp  173  success Firefox  35 0 1  Mac     amp shy  success   lt wbr gt  success   amp  173  success Safari  6 1 2  Mac     amp shy  success   lt wbr gt  success   amp  173  success IE10  Win7    amp shy  fail only matches when both contain shy hyphens   lt wbr gt  success   amp  173  fail only matches when both contain shy hyphens IE8  Win7    amp shy  fail only matches when both contain shy hyphens   lt wbr gt  success   amp  173  fail only matches when both contain shy hyphens IE7  Win7    amp shy  fail only matches when both contain shy hyphens   lt wbr gt  success   amp  173  fail only matches when both contain shy hyphens

User · Answer

Sometimes web browsers seems to be more forgiving if you use the Unicode string  amp  173  rather than the  amp shy  entity

User · Answer

Unfortunately   amp shy s support is so inconsistent between browsers that it can t really be used   QuirksMode is right -- there s no good way to use soft hyphens in HTML right now  See what you can do to go without them   2013 edit  According to QuirksMode   amp shy  now works is supported on all major browsers

User · Answer

It is very important to notice that  as of HTML5   lt wbr gt  and  amp shy  are not supposed to do the same thing   Soft hyphens   amp shy  is a soft hyphen  i e   U 00AD  SOFT HYPHEN  For example   inneh  lls amp shy f  rteckning   might be rendered as  inneh  llsf  rteckning   or as  inneh  lls- f  rteckning   As of today  soft hyphens work in Firefox  Chrome  and Internet Explorer   The wbr element  The wbr element is a word-break opportunity  which will not display a hyphen if a line break occurs  For example   ABCDEFG lt wbr  gt abcdefg   might be rendered as  ABCDEFGabcdefg   or as  ABCDEFG abcdefg   As of today  this element works in Firefox and Chrome

User · Answer

lt wbr gt  and  amp shy   Today you can use both    lt wbr gt  use to break and do not put more information   Example  use to show links    https   stackoverflow com questions 226464 soft-hyphen-in-html-wbr-vs-shy    amp shy  when necessary  at this point the text will break and add a hyphen   Example       im amp shy pos amp shy s   amp shy vel pa amp shy ra um ho amp shy mem a amp shy pren amp shy der a amp shy qui amp shy lo que ele acha que j   sa amp shy be     x000D   x000D  div  x000D    max-width  130px  x000D    border-width  2px  x000D    border-style  dashed  x000D    border-color   f00  x000D    padding  10px  x000D    x000D   lt div gt https    lt wbr gt stackoverflow com lt wbr gt  questions 226464 lt wbr gt  soft-hyphen-in- lt wbr gt html-wbr-vs-shy lt  div gt  x000D   x000D   lt div gt    im amp shy pos amp shy s   amp shy vel pa amp shy ra um ho amp shy mem a amp shy pren amp shy der a amp shy qui amp shy lo que ele acha que j   sa amp shy be  lt  div gt  x000D   x000D   x000D

User · Answer

It is very important to notice that  as of HTML5   lt wbr gt  and  amp shy  are not supposed to do the same thing   Soft hyphens   amp shy  is a soft hyphen  i e   U 00AD  SOFT HYPHEN  For example   inneh  lls amp shy f  rteckning   might be rendered as  inneh  llsf  rteckning   or as  inneh  lls- f  rteckning   As of today  soft hyphens work in Firefox  Chrome  and Internet Explorer   The wbr element  The wbr element is a word-break opportunity  which will not display a hyphen if a line break occurs  For example   ABCDEFG lt wbr  gt abcdefg   might be rendered as  ABCDEFGabcdefg   or as  ABCDEFG abcdefg   As of today  this element works in Firefox and Chrome

User · Answer

Sometimes web browsers seems to be more forgiving if you use the Unicode string  amp  173  rather than the  amp shy  entity

User · Answer

I used soft hyphen unicode character successfully in few desktop and mobile browsers to solve the issue    The unicode symbol is  u00AD and is pretty easy to insert into Python unicode string like s   u                        u00AD   u00AD   u00AD   u00AD        Other solution is to insert the unicode char itself  and the source string will look perfectly ordinary in editors like Sublime Text  Kate  Geany  etc  cursor will feel the invisible symbol though     Hex editors of in-house tools can automate this task easily    An easy kludge is to use rare and visible character  like     which is easy to copy and paste  and replace it on soft hyphen using  e g  frontend script in   document  ready       Source code like s   u                                              replace       u  u00AD   is easier to read than s   u                    u00AD  u00AD   u00AD  u00AD   u00AD   u00AD   u00AD

User · Answer

I used soft hyphen unicode character successfully in few desktop and mobile browsers to solve the issue    The unicode symbol is  u00AD and is pretty easy to insert into Python unicode string like s   u                        u00AD   u00AD   u00AD   u00AD        Other solution is to insert the unicode char itself  and the source string will look perfectly ordinary in editors like Sublime Text  Kate  Geany  etc  cursor will feel the invisible symbol though     Hex editors of in-house tools can automate this task easily    An easy kludge is to use rare and visible character  like     which is easy to copy and paste  and replace it on soft hyphen using  e g  frontend script in   document  ready       Source code like s   u                                              replace       u  u00AD   is easier to read than s   u                    u00AD  u00AD   u00AD  u00AD   u00AD   u00AD   u00AD

User · Answer

I use  amp shy   inserted manually where necessary   I always find it a pity that people don   t use techniques because there is some   maybe old or strange   browser around which doesn   t handle them the way they were specified  I found that  amp shy  is working properly in both recent Internet Explorer and Firefox browsers  that should be enough  You may include a browser check telling people to use something mature or continue at their own risk if they come around with some strange browser   Syllabification isn   t that easy and I cannot recommend leaving it to some Javascript  It   s a language specific topic and may need to be carefully revised by the deskman if you don   t want it to turn your text irritating  Some languages  such as German  form compound words and are likely to lead to decomposition problems  E g  Spargelder  germ  saved money  pl   may  by syllabification rules  be wrapped in two places  Spar-gel-der   However  wrapping it in the second position  turns the first part to show up as Spargel-  germ  asparagus   activating a completely misleading concept in the head of the reader and therefore shoud be avoided   And what about the string Wachstube  It could either mean    guardroom     Wach-stu-be  or    tube of wax     Wachs-tu-be   You may probably find other examples in other languages as well  You should aim to provide an environment in which the deskman can be supported in creating a well-syllabified text  proof-reading every critical word

User · Answer

This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery    function           fn breakWords   function          this each function            if this nodeType     1    return            if this currentStyle  amp  amp  typeof this currentStyle wordBreak      string                Lazy Function Definition Pattern  Peter s Blog            From http   peter michaux ca article 3556          this runtimeStyle wordBreak    break-all                   else if document createTreeWalker                Faster Trim in Javascript  Flagrant Badassery            http   blog stevenlevithan com archives faster-trim-javascript           var trim   function str               str   str replace    s s                    var ws     s              i   str length             while  ws test str charAt --i                return str slice 0  i   1                           Lazy Function Definition Pattern  Peter s Blog            From http   peter michaux ca article 3556             For Opera  Safari  and Firefox          var dWalker   document createTreeWalker this  NodeFilter SHOW TEXT  null  false            var node s c   String fromCharCode  8203             while  dWalker nextNode                 node   dWalker currentNode               we need to trim String otherwise Firefox will display              incorect text-indent with space characters            s   trim  node nodeValue   split     join c              node nodeValue   s                                     return this            jQuery

User · Answer

I use  amp shy   inserted manually where necessary   I always find it a pity that people don   t use techniques because there is some   maybe old or strange   browser around which doesn   t handle them the way they were specified  I found that  amp shy  is working properly in both recent Internet Explorer and Firefox browsers  that should be enough  You may include a browser check telling people to use something mature or continue at their own risk if they come around with some strange browser   Syllabification isn   t that easy and I cannot recommend leaving it to some Javascript  It   s a language specific topic and may need to be carefully revised by the deskman if you don   t want it to turn your text irritating  Some languages  such as German  form compound words and are likely to lead to decomposition problems  E g  Spargelder  germ  saved money  pl   may  by syllabification rules  be wrapped in two places  Spar-gel-der   However  wrapping it in the second position  turns the first part to show up as Spargel-  germ  asparagus   activating a completely misleading concept in the head of the reader and therefore shoud be avoided   And what about the string Wachstube  It could either mean    guardroom     Wach-stu-be  or    tube of wax     Wachs-tu-be   You may probably find other examples in other languages as well  You should aim to provide an environment in which the deskman can be supported in creating a well-syllabified text  proof-reading every critical word

User · Answer

Unfortunately   amp shy s support is so inconsistent between browsers that it can t really be used   QuirksMode is right -- there s no good way to use soft hyphens in HTML right now  See what you can do to go without them   2013 edit  According to QuirksMode   amp shy  now works is supported on all major browsers

User · Answer

lt wbr gt  and  amp shy   Today you can use both    lt wbr gt  use to break and do not put more information   Example  use to show links    https   stackoverflow com questions 226464 soft-hyphen-in-html-wbr-vs-shy    amp shy  when necessary  at this point the text will break and add a hyphen   Example       im amp shy pos amp shy s   amp shy vel pa amp shy ra um ho amp shy mem a amp shy pren amp shy der a amp shy qui amp shy lo que ele acha que j   sa amp shy be     x000D   x000D  div  x000D    max-width  130px  x000D    border-width  2px  x000D    border-style  dashed  x000D    border-color   f00  x000D    padding  10px  x000D    x000D   lt div gt https    lt wbr gt stackoverflow com lt wbr gt  questions 226464 lt wbr gt  soft-hyphen-in- lt wbr gt html-wbr-vs-shy lt  div gt  x000D   x000D   lt div gt    im amp shy pos amp shy s   amp shy vel pa amp shy ra um ho amp shy mem a amp shy pren amp shy der a amp shy qui amp shy lo que ele acha que j   sa amp shy be  lt  div gt  x000D   x000D   x000D

[html] Soft hyphen in HTML (<wbr> vs. )

Examples related to html

Examples related to text

Examples related to soft-hyphen

Examples related to wbr

[html] Soft hyphen in HTML (<wbr> vs. &shy;)

Examples related to html

Examples related to text

Examples related to soft-hyphen

Examples related to wbr

[html] Soft hyphen in HTML (<wbr> vs. )