show & tell - the mighty hyphen

Download Show & tell - The mighty hyphen

Post on 22-Jan-2018

201 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

  1. 1. Hyphen
  2. 2. Hyphen Minus n dash m dash
  3. 3. Hyphen Used to join words to indicate they have a combined meaning, to indicate the division of a word at the end of a line or to indicate a missing element. Comes in two avours - Breaking and non-breaking Hyphen-minus - Minus or Usually longer than a hyphen but shorter than an m dash. A mathematical operator used to represent the notion of negative and subtraction.
  4. 4. mnn dash or Traditionally derived from the width of a lower-case n. Indicates a closed range of values. Can also be used to contrast two values or illustrate a relationship between two things. m dash or Traditionally derived from the height of a lower-case m. 1em wide, a length that varies with the size of the font. Can be used in place of parentheses or a colon. Usually shows an abrupt change in thought where a full stop is too strong and a comma to weak.
  5. 5. So your point is?
  6. 6. Long titles + small screens. Weve got a bit of a problem.
  7. 7. Unbreakab Default Do nothing at all. The word is larger than its containing area. The container is extended so the word can remain unbroken on a single line.
  8. 8. Unbreaka bleWord wrap The invisible hyphen. Word wrap breaks a word at the last character before the limit of its constraining area.
  9. 9. Unbreak- ableHard hyphens An automatic line break after a hyphen Hyphenates the word after the last character before the limit of the constraining area.
  10. 10. Unbreakable Font size change Reduce the size of the font at smaller screen sizes This is useful but not as exible as it could be. There is almost always a longer word out there. How small are you willing to go? Nano-technology
  11. 11. Thats that sorted then. Of course not
  12. 12. Ill hyphenate anything including already hyphenated words like nano-technology nano-tec- hnology architec- ture I dont auto-hyphenate anything as I prefer to word break instead. I will word break on a soft-hyphen if one is present. nano- technology architec ture Ill hyphenate anything including already hyphenated words like nano-technology. nano-tec- hnology architec- ture Ill hyphenate anything but err towards breaking on soft hyphens if one is present. nano- technology architec- ture
  13. 13. // Type hyphenation @mixin type-hyphenation { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
  14. 14. We add this only for smaller device sizes. Otherwise things can go a bit nuts.