04-12-text-align-justify.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>The dangers of text-align: justify</title>
  7. <style>
  8. body {
  9. font-family: Georgia, Times, 'Times New Roman', serif;
  10. line-height: 1.5;
  11. margin: 0;
  12. padding: 3em 1em;
  13. }
  14. article {
  15. max-width: 38em;
  16. margin: 0 auto;
  17. }
  18. h1, h2, h3, h4, h5, h6 {
  19. font-family: Avenir Next, Avenir, SegoeUI, arial, sans-serif;
  20. line-height: 1.25em;
  21. margin-top: 24px; /* fallback for IE<9 */
  22. margin-top: 1.5rem; /* 24px */
  23. margin-bottom: .25em;
  24. font-weight: 500;
  25. }
  26. h1 {
  27. font-size: 2.315em; /* 37px */
  28. font-weight: 800;
  29. border-bottom: 1px solid #C8BC9D;
  30. text-align: center;
  31. margin-bottom: .5em;
  32. text-transform: uppercase;
  33. }
  34. h2 {
  35. font-weight: 600;
  36. font-size: 1.75em; /* 28px */
  37. }
  38. h3 {
  39. font-size: 1.333em; /* 20px */
  40. }
  41. p {
  42. margin: 0;
  43. text-align: justify;
  44. }
  45. abbr {
  46. text-transform: lowercase;
  47. font-variant: small-caps;
  48. letter-spacing: 0.05em;
  49. font-size: 1.0625em;
  50. }
  51. p + p {
  52. margin-top: 0;
  53. text-indent: 1.25em;
  54. }
  55. .source {
  56. margin-top: 1.5em;
  57. font-style: italic;
  58. text-indent: none;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <article>
  64. <p>The Moon is thought to have formed approximately 4.5 billion years ago, not long after Earth. There are several hypotheses for its origin; the most widely accepted explanation is that the Moon formed from the debris left over after a giant impact between Earth and a Mars-sized body called Theia.</p>
  65. </article>
  66. </body>
  67. </html>