{"id":297824,"date":"2019-10-25T14:53:36","date_gmt":"2019-10-25T21:53:36","guid":{"rendered":"https:\/\/css-tricks.com\/?p=297824"},"modified":"2019-10-25T14:53:36","modified_gmt":"2019-10-25T21:53:36","slug":"bidirectional-horizontal-rules-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/bidirectional-horizontal-rules-in-css\/","title":{"rendered":"Bidirectional Horizontal Rules in CSS"},"content":{"rendered":"

Say you have a <blockquote><\/code> and the design calls for a thick border along the left side. Well, you might not necessarily mean left<\/em> side, but actually mean on the side of the start of the text<\/em>. <\/p>\n

That’s exactly what CSS logical properties<\/a> are meant to address, and Hussein Al Hammad has a nice article<\/a> laying out some use cases, including the blockquote thing I mentioned above.<\/p>\n

<\/p>\n

By using logical properties, you don’t have to mess around with manually writing selectors including [dir=\"rtl\"]<\/code> or needing to be aware of writing modes and such. The box model stuff (borders, padding, margin…) will adjust where it needs to be.<\/p>\n

Hussein’s blockquote is a good baby step example for understanding of all this:<\/p>\n

blockquote {\r\n  \/* Rather than... *\/\r\n  border-left: 4px solid #aaa;\r\n  padding-left: 1.75rem;\r\n\r\n  \/* You'd do... *\/\r\n  border-inline-start: 4px solid #aaa;\r\n  padding-inline-start: 1.75rem;\r\n}<\/code><\/pre>\n
\n  See the Pen 
\n  Logical properties demo: blockquote<\/a> by Hussein Al Hammad (@hus_hmd<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
Support is pretty good.<\/p>\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
89<\/span><\/td>66<\/span><\/td>No<\/span><\/td>89<\/span><\/td>15<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
124<\/span><\/td>125<\/span><\/td>124<\/span><\/td>15.0-15.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n
One thing that threw me off in the article is the term “Horizontal Rules.” First I imagined the <hr><\/code> element. Then I imagined wanting to reverse the direction of the design with logical properties. Usually an <hr><\/code> is just a line so horizontal direction doesn’t matter, but let’s say it’s like a shorter<\/em> line along the edge where new lines start after wrapping.<\/p>\n
We could draw the shorter line with backgrounds that cover different parts of the box model, then use logical properties where the padding applies. This is a pretty unique edge case, but it’s fun to fiddle with:<\/p>\n
\n  See the Pen 
\n  <hr>s that are direction aware kinda<\/a> by Chris Coyier  (@chriscoyier<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
It would be even easier if we had logical gradients<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Say you have a <blockquote><\/blockquote> and the design calls for a thick border along the left side. Well, you might not necessarily mean left side, but actually mean on the side of the start of the text. That’s exactly what CSS logical properties are meant to address, and Hussein Al Hammad has a nice article […]<\/p>\n","protected":false},"author":3,"featured_media":296211,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1467],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/arrow-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":344815,"url":"https:\/\/css-tricks.com\/css-logical-properties-and-values\/","url_meta":{"origin":297824,"position":0},"title":"CSS Logical Properties and Values","date":"July 27, 2021","format":false,"excerpt":"Now that cross-browser support is at a tipping point, it's a good time to take a look at logical properties and values. If you're creating a website in multiple languages, logical properties and values are incredibly useful. Even if you're not, there are still some convenient new shorthands it's worth\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_23DCC53F37C675A56273FC1D596017BBDCB5DB765FF03E9E64CEC128CB81E439_1624787344817_blockandinline.png?fit=1200%2C454&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302289,"url":"https:\/\/css-tricks.com\/building-multi-directional-layouts\/","url_meta":{"origin":297824,"position":1},"title":"Building Multi-Directional Layouts","date":"January 23, 2020","format":false,"excerpt":"There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS logical properties and values (e.g. margin-inline-start). \u00a0These are a W3C working draft that still going under heavy editing, but have shipped in many browsers.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/rtl-ltr.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365031,"url":"https:\/\/css-tricks.com\/late-to-logical\/","url_meta":{"origin":297824,"position":2},"title":"Late to Logical","date":"December 7, 2020","format":false,"excerpt":"2020 brought\u00a0another wave of logical property features\u00a0to major browsers and I\u2019ve thoroughly enjoyed my investment into logical, rather than physical, web styling. I feel like I\u2019ve learned a new way to speak about the box model that results in less written code with more global coverage. p { \/* \ud83d\udeab\u2026","rel":"","context":"In "2020 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/block-and-inline-visual.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":325899,"url":"https:\/\/css-tricks.com\/logical-layout-enhancements-with-flow-relative-shorthands\/","url_meta":{"origin":297824,"position":3},"title":"Logical layout enhancements with flow-relative shorthands","date":"November 16, 2020","format":false,"excerpt":"Admission: I've never worked on a website that was in anything other than English. I have worked on websites that were translated by other teams, but I didn't have much to do with it. I do, however, spend a lot of time thinking in terms of block-level and inline-level elements.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/block-and-inline-visual.png?fit=1200%2C865&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367064,"url":"https:\/\/css-tricks.com\/logical-properties-for-useful-shorthands\/","url_meta":{"origin":297824,"position":4},"title":"Logical Properties for Useful Shorthands","date":"July 20, 2022","format":false,"excerpt":"Michelle Barker with my favorite sorta blog post: short, practical, and leaves you with a valuable nugget for your time. Here, she gets into logical property shorthands in CSS, particularly those that set lengths just on a single axis, say only the block (vertical) axis or just the inline (horizontal)\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/hands-dirst-flowers.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359180,"url":"https:\/\/css-tricks.com\/faulty-logic\/","url_meta":{"origin":297824,"position":5},"title":"Faulty logic","date":"December 14, 2021","format":false,"excerpt":"Ain't this the truth: It\u2019s like when you\u2019re learning a new language. At some point your brain goes from\u00a0translating\u00a0from your mother tongue into the other language, and instead starts\u00a0thinking\u00a0in that other language. I don't speak any other language besides English, but I've heard that's true. With perhaps a last step\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/candles-lightbulb.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297824"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"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=297824"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297824\/revisions"}],"predecessor-version":[{"id":297888,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297824\/revisions\/297888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296211"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=297824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=297824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=297824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}