Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zero-width non-breaking space

Tags:

html

css

I have a piece of text and at the end I want to insert two icons.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris <img ...><img ...> 

I want to keep the two images joined and if an image overflows both should go to the new line, so what I need is something like a &nbsp; but with zero width.

Is there an html entity to do that or another way to archieve this without using a wrapper?

like image 567
Pedro L. Avatar asked Jul 09 '12 09:07

Pedro L.


1 Answers

The No-Break Space is very similar to a Word-Joiner, just as it's very similar to a Space. But each, has very different usages. All of these variations exist to represent different widths and functions of a space character.

  • U+00A0 No-Break Space &nbsp; represented similarly to a space character, it prevents an automatic line break.
  • U+2007 Figure Space &#8199; a space somewhat equal to the figures (0–9) characters.
  • U+202F Narrow No-Break Space &#8239; or &nnbsp;) used to separate a suffix from a word stem without indicating a word boundary. Approximately 1/3 the representative space of a normal space though it may vary by font.
  • U+2060 Word-Joiner &#8288; representative by no visible character, it prohibits a line break at its position.

Other No-Break Characters

  • NON-BREAKING HYPHEN (U+2011)
  • FIGURE SPACE (U+2007)
  • NARROW NO-BREAK SPACE (U+202F)
  • TIBETAN MARK DELIMITER TSHEG BSTAR (U+0F0C)

W3C recommends using the Word-Joiner whenever you need to connect two characters or words so that they do not wrap. [1]

To get the same functionality, formerly provided through the ZERO-WIDTH NON-BREAKING SPACE authors should use a WORD JOINER (U+2060) instead

However, nowhere in the HTML4 Character Reference is Word-Joiner mentioned. [2]

In addition to these characters the SOFT HYPHEN (U+00AD) can be used to provide line-break hints within words that UAs might not have in their own hyphenation dictionaries.

The only characters that are explicitly discouraged are ZERO WIDTH NON-JOINER (U+200C): prevents ligation and cursive connections between characters that would other wise ligate or join cursively.

  • ZERO WIDTH JOINER (U+200D): encourages ligation and cursive connections.

References:

  1. W3C Wiki: HTML Character Usage
  2. Character entity references in HTML 4

Further:

  1. Unicode.org Correction of Word_Break Property Value for U+00A0 NBSP
  2. Unicode v.3.2.0 Line Break Properties
  3. Unicode ?Proposed? Line Breaking Properties
  4. Unicode v7 Complete Standards
  5. Unicode Explained by Jukka Korpela
like image 148
davidcondrey Avatar answered Oct 25 '22 21:10

davidcondrey