diff options
Diffstat (limited to 'build/text-align-justify/index.html')
| -rw-r--r-- | build/text-align-justify/index.html | 38 |
1 files changed, 23 insertions, 15 deletions
diff --git a/build/text-align-justify/index.html b/build/text-align-justify/index.html index cc69ec8..ab7c747 100644 --- a/build/text-align-justify/index.html +++ b/build/text-align-justify/index.html @@ -1,34 +1,42 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Text Align: Justify</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Text Align: Justify</h1> +<h1 id="text-align-justify">Text Align: Justify</h1> + <p>2019-05-22</p> + <p>The text-align property is fairly well known in the world of CSS, even among those just starting out with the language. Values such as <code>center</code>, <code>left</code> and <code>right</code> are used often with this property, but a more forgotten option is <code>justify</code>.</p> -<h2>What does justify do?</h2> + +<h2 id="what-does-justify-do">What does justify do?</h2> + <p>The MDN web docs define the <code>justify</code> value for <code>text-align</code> as such:</p> -<p><blockquote> - <p>The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p> - <cite><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">MDN web docs</a></cite> -</blockquote></p> -<h3>See it in action</h3> + +<h3 id="see-it-in-action">See it in action</h3> + <p><a href="https://codepen.io/bradleytaunt/pen/vwpmNz/">Live CodePen Example</a></p> -<h2>When should I use this?</h2> -<p>It isn't always appropriate to use <code>justify</code> in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original <em>print</em> book layouts, the <code>justify</code> value helps improve readability for larger chunks of content.</p> -<p><strong>Fair warning</strong>: it is best to remove any <code>justify</code> values when targeting smaller screen sizes. Mobile devices and/or tablets tend to be small enough to break up the content already. This CSS value is better suited for larger viewports.</p> -<h2>Browser support</h2> + +<h2 id="when-should-i-use-this">When should I use this?</h2> + +<p>It isn’t always appropriate to use <code>justify</code> in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original <em>print</em> book layouts, the <code>justify</code> value helps improve readability for larger chunks of content.</p> + +<p><strong>Fair warning</strong>: it is best to remove any <code>justify</code> values when targeting smaller screen sizes. Mobile devices and/or tablets tend to be small enough to break up the content already. This CSS value is better suited for larger viewports.</p> + +<h2 id="browser-support">Browser support</h2> + <p>The good news is that all major browsers support the <code>justify</code> value for the <code>text-align</code> CSS property. So have some worry-free fun with it!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> |