{"id":20554,"date":"2013-03-13T15:22:25","date_gmt":"2013-03-13T22:22:25","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=20554"},"modified":"2020-09-01T08:21:44","modified_gmt":"2020-09-01T15:21:44","slug":"hanging-punctuation","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/h\/hanging-punctuation\/","title":{"rendered":"hanging-punctuation"},"content":{"rendered":"\n<p>The <code>hanging-punctuation<\/code> property aims at giving web designers a finer grained control over typography on the web.<\/p>\n\n\n\n<p>The idea behind hanging punctuation is to put some punctuation characters from start (or to a lesser extend at the end) of text elements &#8220;outside&#8221; of the box in order to preserve the reading flow.<\/p>\n\n\n\n<p>Basically, it would slightly move that quote, bullet or whatever to the left (or right in <code>rtl<\/code> mode) so that the first letter is properly aligned with the rest of the document.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/03\/paragraph-with-hanging-punctuation@2x.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>Figure from <a href=\"http:\/\/stevehickeydesign.com\/blog\/2012\/12\/04\/hanging-punctuation-with-css\/\" rel=\"noopener\">this article by Steve Hickey<\/a><\/figcaption><\/figure>\n\n\n\n<p><em>Please note this property is optional so browser makers may or may not support it.<\/em><\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mWJJNx\" src=\"\/\/codepen.io\/anon\/embed\/mWJJNx?height=450&amp;theme-id=1&amp;slug-hash=mWJJNx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mWJJNx\" title=\"CodePen Embed mWJJNx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]\n\nblockquote p {\n  hanging-punctuation: first;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"none\"><code>none<\/code><\/h4>\n\n\n<p>No character hangs. This is the default value for this property.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"first\"><code>first<\/code><\/h4>\n\n\n<p>An available character at the start of the first formatted line of an element hangs.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"last\"><code>last<\/code><\/h4>\n\n\n<p>An available character at the end of the last formatted line of an element hangs.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"forceend\"><code>force-end<\/code><\/h4>\n\n\n<p>A stop or comma at the end of a line hangs.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/03\/hanging-punctuation-force-end.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>The punctuation is forced to hang and isn&#8217;t considered when measuring the line for justification.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"allowend\"><code>allow-end<\/code><\/h4>\n\n\n<p>A stop or comma at the end of a line hangs if it doesn&#8217;t otherwise fit prior to justification.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/03\/hanging-punctuation-allow-end.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>The punctuation at the end of the first line for doesn&#8217;t hang because it fits without hanging. On the second line however, there isn&#8217;t enough space so it does hang.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"available-characters\">Available characters<\/h3>\n\n\n<figure class=\"wp-block-table data\"><table><tbody><tr><th>Code<\/th><th>Character<\/th><th>Name<\/th><\/tr><tr><td><code>U<\/code>+<code>002C<\/code><\/td><td>,<\/td><td>COMMA<\/td><\/tr><tr><td><code>U<\/code>+<code>002E<\/code><\/td><td>.<\/td><td>FULL STOP<\/td><\/tr><tr><td><code>U<\/code>+<code>060C<\/code><\/td><td>\u060c<\/td><td>ARABIC COMMA<\/td><\/tr><tr><td><code>U<\/code>+<code>06D4<\/code><\/td><td>\u06d4<\/td><td>ARABIC FULL STOP<\/td><\/tr><tr><td><code>U<\/code>+<code>3001<\/code><\/td><td>\u3001<\/td><td>IDEOGRAPHIC COMMA<\/td><\/tr><tr><td><code>U<\/code>+<code>3002<\/code><\/td><td>\u3002<\/td><td>IDEOGRAPHIC FULL STOP<\/td><\/tr><tr><td><code>U<\/code>+<code>FF0C<\/code><\/td><td>\uff0c<\/td><td>FULLWIDTH COMMA<\/td><\/tr><tr><td><code>U<\/code>+<code>FF0E<\/code><\/td><td>\uff0e<\/td><td>FULLWIDTH FULL STOP<\/td><\/tr><tr><td><code>U<\/code>+<code>FE50<\/code><\/td><td>\ufe50<\/td><td>SMALL COMMA<\/td><\/tr><tr><td><code>U<\/code>+<code>FE51<\/code><\/td><td>\ufe51<\/td><td>SMALL IDEOGRAPHIC COMMA<\/td><\/tr><tr><td><code>U<\/code>+<code>FE52<\/code><\/td><td>\ufe52<\/td><td>SMALL FULL STOP<\/td><\/tr><tr><td><code>U<\/code>+<code>FF61<\/code><\/td><td>\uff61<\/td><td>HALFWIDTH IDEOGRAPHIC FULL STOP<\/td><\/tr><tr><td><code>U<\/code>+<code>FF64<\/code><\/td><td>\uff64<\/td><td>HALFWIDTH IDEOGRAPHIC COMMA<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Note that user agents are allowed to add any character to this list. Quoting the spec:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The UA may include other characters as appropriate.<\/p><\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related Properties<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-indent\/\"><code>text-indent<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align\/\"><code>text-align<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other Resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css3-text\/#hanging-punctuation0\" rel=\"noopener\"><code>hanging-punctuation<\/code> in the spec<\/a><\/li><li><a href=\"http:\/\/stevehickeydesign.com\/blog\/2012\/12\/04\/hanging-punctuation-with-css\/\" rel=\"noopener\"><code>hanging-punctuation<\/code> with CSS<\/a> by Steve Hickey<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-hanging-punctuation\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"n nope\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"n nope\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"Android - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.0-10.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>A decent fallback for unsupported browser would be to use a negative text-indent as so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">blockquote p {\n  text-indent: -0.5em; \/* Change according to your font *\/\n}<\/code><\/pre>\n\n\n\n<p>For bullet lists, you might want to make sure the position of bullets is set to <code>outside<\/code> and that the container&#8217;s overflow isn&#8217;t set to <code>hidden<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The hanging-punctuation property aims at giving web designers a finer grained control over typography on the web. The idea behind hanging punctuation is to put some punctuation characters from start (or to a lesser extend at the end) of text elements &#8220;outside&#8221; of the box in order to preserve the reading flow. Basically, it would [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13925,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1160,587],"acf":[],"jetpack-related-posts":[{"id":14113,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-indent\/","url_meta":{"origin":20554,"position":0},"title":"text-indent","date":"September 6, 2011","format":false,"excerpt":"The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element. The starting edge is usually on the left, but can be right\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":244389,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/speak\/","url_meta":{"origin":20554,"position":1},"title":"speak","date":"March 10, 2017","format":false,"excerpt":"The speak property in CSS is for specifying if a browser should speak the content it reads, such as through a screen reader. .module { speak: never; speak-as: spell-out; } Values for speak auto: As long as the element is not display: block and is visibility: visible, text will be\u2026","rel":"","context":"In \"accessibility\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325124,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-break\/","url_meta":{"origin":20554,"position":2},"title":"line-break","date":"November 6, 2020","format":false,"excerpt":"The CSS line-break property defines how strictly to enforce rules for wrapping text wrapping on new lines, particularly when working with symbols and punctuations in Chinese, Japanese or Korean (CJK) writing systems. It is included in the CSS Text Module Level 3 specification, which is currently in Editor's Draft. .element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198601,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip\/","url_meta":{"origin":20554,"position":3},"title":"text-decoration-skip","date":"March 31, 2015","format":false,"excerpt":"The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages. Here's one example: a { text-decoration-skip: ink; } Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;. If\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14192,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-letter\/","url_meta":{"origin":20554,"position":4},"title":"::first-letter","date":"February 14, 2013","format":false,"excerpt":"::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span> tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a\u2026","rel":"","context":"With 20 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18197,"url":"https:\/\/css-tricks.com\/lodge\/v10\/024-playing-with-typography-in-typecast\/","url_meta":{"origin":20554,"position":5},"title":"#024: Playing with Typography in Typecast","date":"September 11, 2012","format":false,"excerpt":"Typecast (in beta at the time of this filming) is a really neat web app for playing with web typography. It gives you a great interface for playing around with the basics of typography, like what your headers and body copy look like. The real fundamentals: sizing, line-height, coloring, all\u2026","rel":"","context":"With 11 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20554"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20554"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20554\/revisions"}],"predecessor-version":[{"id":320343,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20554\/revisions\/320343"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13925"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20554"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}