CSS Text Box Trim

{
  "by": "bpierre",
  "descendants": 52,
  "id": 40247871,
  "kids": [
    40248641,
    40248459,
    40248527,
    40253437,
    40249407,
    40250027,
    40248853,
    40250551,
    40260943,
    40249339,
    40252869,
    40249058,
    40254340,
    40249417,
    40250466
  ],
  "score": 222,
  "time": 1714745509,
  "title": "CSS Text Box Trim",
  "type": "story",
  "url": "https://github.com/jantimon/text-box-trim-examples"
}

{
  "author": "jantimon",
  "date": null,
  "description": "text-box-trim examples and playground (previously known as leading-trim) - jantimon/text-box-trim-examples",
  "image": "https://opengraph.githubassets.com/0434bb3b8b5dfb69dcb8f27e3c6ae3597e74173f0e9287917cc6b53a3da360e6/jantimon/text-box-trim-examples",
  "logo": "https://logo.clearbit.com/github.com",
  "publisher": "GitHub",
  "title": "GitHub - jantimon/text-box-trim-examples: text-box-trim examples and playground (previously known as leading-trim)",
  "url": "https://github.com/jantimon/text-box-trim-examples"
}

{
  "url": "https://github.com/jantimon/text-box-trim-examples",
  "title": "GitHub - jantimon/text-box-trim-examples: text-box-trim examples and playground (previously known as leading-trim)",
  "description": "CSS Text Box Trim CSS Text Box Trim is a CSS property that allows you to remove the leading whitespace from a block of text. This is useful for removing the space between the top of the text and the top of...",
  "links": [
    "https://github.com/jantimon/text-box-trim-examples"
  ],
  "image": "https://opengraph.githubassets.com/0434bb3b8b5dfb69dcb8f27e3c6ae3597e74173f0e9287917cc6b53a3da360e6/jantimon/text-box-trim-examples",
  "content": "<div><article><div><h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples/blob/main/public/leading-trim.png\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/public/leading-trim.png\" /></a> CSS Text Box Trim</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#-css-text-box-trim\"></a></div>\n<p>CSS Text Box Trim is a CSS property that allows you to remove the leading whitespace from a block of text. This is useful for removing the space between the top of the text and the top of the container.</p>\n<p>🚨 <code>text-box-trim</code> is the new name for <code>leading-trim</code>: <a target=\"_blank\" href=\"https://github.com/w3c/csswg-drafts/issues/8067#issuecomment-1451111081\">w3c/csswg-drafts#8067 (comment)</a></p>\n<p></p><h2>Usage</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#usage\"></a><p></p>\n<div><pre>.<span>text-box-trim</span> {\n  <span>text-box-trim</span><span>:</span> both;\n  <span>text-box-edge</span><span>:</span> cap alphabetic;\n}</pre></div>\n<p><a target=\"_blank\" href=\"https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/intro.webp\" alt=\"Animation cutting of both edges from a text\" /></a></p>\n<p><a target=\"_blank\" href=\"https://en.99designs.it/blog/tips/typography-design/\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/ascender.png\" alt=\"example for ascender and cap height\" /></a></p>\n<p><a target=\"_blank\" href=\"https://kanji-database.sourceforge.net/fonts/base.svg\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/asian-fonts.png\" alt=\"example for asian fonts\" /></a></p>\n<p></p><h2>Playground</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#playground\"></a><p></p>\n<p>text-box-trim is right now only supported by Safari Technology Preview with the old <code>leading-trim</code> name.<br />\nBut you can try it out right now in the <strong><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=FwJw9mAuAEDeBQ1oFpkA8DOxoBYAOaA3IisltABwHFKoC22AjAGzXwC+88AdAO4gBDPHgCmIOCSR0BaZLwCWAE0gALJhQAMbJEgBGYEIrHIANiIBmkbACYC0DGBNLoukwIDGAaxo68AxYryAHYA5qYWVrjaOtIgIcHI+pCQYAzQAG4CIAAU9ACUxJzwKowSOtBm-sFhkCDyaUkqPkiQImiQyCKKISLY7kLQre3N0O6OBthxutnWAKyzADSUjEsaBZLQsfFB2BojWwlJKWmZOfmFXHhlOpWBoci19diNI0MdXT19A2-7Wdu7Fy4ugArskwEFrn4AtUbHZ8EQOPAQWCIQA+ex+CEIcq3aoPOoNKBNDZvTrdXqjb5tSAjQIYPBuACe2GCTiCIkSJjAXkKAB4APT81G8wLpUZuDAYAC8ACJ+EJRCAZaiNrySiryjiRFVQtBebpxELBgTVfz1aq8BrNUhcfdHnRoPIMNABPZgSEehhWopoOzeNAAMIAZSD0Dw4EVkEZgxUAhgZkgzuBzpAIjoYHSIhjWepggxHmqjohIkzIGj5nBMAcMbj0F4Wf6EPTqbDqcC7kgAlc0a9jLMg2p3FNlvgAtFKtHyJSQStSF59IEM425XcTi8mxEpoXS4FU-BqKAA\">playground</a></strong></p>\n<p></p><h2>Playground Examples</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#playground-examples\"></a><p></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgB2mATgLYCGANgNwzzJpY5yUCW1pWcYMwC+UYACZILRCgzZchEqxTNYM9vK69+mQSLEBmKWrZyc+IqWSrlGzjz5gBQqKOAAWY7bMLLYAMa0AA5gDEHAtOgIcNz+Nuo+Wo7O+sAArF4JHL5K3HgImASUwcCx8abZSTp6rmIAbJkV8ha5+YXF4bGo3GQA1uWylQ7VLqJQ41AA9ABU02DACPRBCJRgAM5wAJ70CGtg05NQc9CwQbR4eD0EpAAMNnSUBD23NgBmmGRoAO4I3ATAcFIFBoDDeHzQa24AC8lAB2G5BJD6KBYPCbLxnC5XUggBFI2pQNYIfwxD5eLCUfKUHGI9aYeh5MCPdAACnEaTSABowLCAJzc9lpACUNgpVNQPH+gLAdxYYpWqB2r2lstglzWQXotE2pB6DLICAw9Ew-n6rgAPJNJgA+KDmokk7gfW2wWDm0Au11enAAdSuLDdkw9dsmDtJZFt43txPDnrdEjjXrAvv9XstCZDYadEajWedAbA7oMie9qD9ZAIBfTxczMezkejjvzaY8JddKYrVaD7ltlrzObt-cT7rSbdggCJ7LvpXuhuv5wdznMtupjsCTtNBle1psRoA\">text-box-edges<br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview-text-box-edges.png\" alt=\"text-box-edges\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=EYVwLmD2B2AEDeAoWLYBMCWBnADgGwEMBPALlgDM8BTADwG5lUBzAnMgVh3sZRwLUzQmZAIyduqWAGNIeSACcyAdwAWGMFQaTgBKQGsm8yCGhoy8psAAU7AMwAaWHcd2AlFtTAFaKotjQYTR5YL3kfeQBaeX4MECwyAE4krlgkhK4GAF9ERFAIGBISYCpyBSoEYJloDWqyACI6jxQdfUNjU3NLKwAGRxEANgAmR0H2dndgpQw0MBUyW26M4II8DCZoCKwqPHIyLDB5KjApFSyc3AI4JEkNGjAIrxoIqjQmKjIpVlgVnBUCYrAGCkTVgt3ujwiBwwAFsyF5ZiDMLhCKRYBhoKtoFQHnJ9CDStVNhgAF7vWAAFkW3GyuUgaCIFV4-EEwlgIipWQAPAB6bkAPk5eSg0D5wU5FxFACECDyJaLZXwRUA\">button<br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview-button.png\" alt=\"button\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=LYQwlgdgBA3gUFKATMBnADgGxATwFxQDmATmEgNwJGlIC0ALgKbBYhO0DGA9pgK7ARUBYo3SM2ACgDMAGigBGAGbEAlJUQkyDZq3bEuAdyFQRYybKghe9LmqqEQ6AvJHBKAXzhwAdBxDEkWCoUDGx8ajJ1CLp9A2cAelp5KM06JhZsPUNjVF4AI1SPL28DYkcxYiDEAzJ6AAtnAAZm9AAPKNBiQkhnV0trLiK4PK4kHCqoPJAOAGsSLl4IOm5MLmICAGIATgBWAHYdgGEAESHff0D4RCnZ+cXlnjWCAzqwJiiRgMZiWjKUXmM8kabQ+XFatFQdRASEMBEaUAATG0FMiulMJI05JioNjGt5GlsVFioAAWZFI1omQjo3FYrH4wnEgAcyLJlLRIAxdJx9IJRJxCgAbMiWezqZzaTycQz+fCpBShajxVypbiZUVzgEoHUERNOt0IL1mAo+o0ooouBB6LQDIwwIQ6vQCDtmlEmK1rSNwfRSMACCN6m7GB7aF7aIwkIRGAQ-OhLJh0FC8ox6GAOBq-FqwMBCBMakh6k1GgBSKJ1O0Op39GwZi5QONXKCYSCMWjl+2O5zeHYdfwGuEm40uZiUKiYcQoCCEBi+-1cQNUd3WiNRmOOeOJkDJ1PpuCeHyZwJ4F7fRgSHVydAqPB1LgAN2+Exuc3092E1IkCPkezk8h2WzkBESUaOx9xKfwIEgXNG3zQsoCZEsonQaFJ0IOFu1cXsuh6QdgGrQYqGfO4lk4R51igDZFAjPYkD2UEvnI+RkVQHgyAoxQdkFTie0ItYkG+X5oTAAEmhBKgViedjuK4s5SnKR9GxCVhwggS1GCKAABXJ0HQNZ6FQKAJFSbQMjYVtYhyfJUhUCZwOISCpwmRAlLCAhVIgdSqE8RASjKHSFKoZy0GU-1VlmKJPHcAAeeJ4gAPjgKKUDvKAOGwVBUAAXgAIgMCCoOyhLECi9A4oATQWSo8gsx8YUYAzVPoKBtN04gmtyAoaBi0rEviZKEqSsAUrSkAMpyuT-OIQqqCi0BICKxAoEG4b0qy7LD2mxbFqinU4oAZXoEAljrQ8Yt2qLs1zVBiA4HLHXodAhFi7MQCjVBvEWUJRrqXwuGAeJE3nLgkn2Ro9gRPZBSApkodoKRmiZKjBT2EBBWTAB+MBWmbPJMuIPIkm8BFvHkAAyEAWHIABHTKEPJynFGATKACt0EIen0HIDh9HQTLGCtHmcA5rmstTCAcGu6lhYMTLgMaYXFDeTLQFaYWsbIPmcAAKTqDgAAkACFFBAAB1ABFMAAHlmYAUUaAA5AAVQgdkUM3svjegcvQSAZmQS1rCgGp6ma9BSAgGZx1QbL4sC7bSoABVGn1xlyBxKm5rg0FQI6muZxhMEwVPeHT0Pw8j+rvCgPaw99qPmttFNLB08cmx4ZtdLjVMymANBeDLuvK6gY4yNS-Rs9zqA7yOsBC5Af2IED6fILnhfrCrvaS-8NvC7ATud47rg4zT7e99yPC1iOqNvG6hbir6oa76W5LUtWnKNqf4rdsOOtU3oVv6hsAAOQGVWFOR8gDoDznLMQVAZ0ERxQujmZqN07r0Aek9eIL03ofUEKwSEv1-qAxsCDRoUMgJ7HBvIBCtBaI7DyFIRgihkxbAxljHGeMCbyCJiTYWNM6YU05ozFmbNhaZ15vzH0R8haCJFplMWEs0TS1ls0BWSsVZq1aBrRg2tdaG2NubK2tsHbO1du7T2OV6giEYGvfSl5fZyDyHwGxR1AgcFvCsMycgQCFyDm8OoA8I5Rxjp-Jaidk7EHGDCReTVkKoBTg3RgTdUCNyasvWe2BEnJK3pUaJgdL7gKrlrAuRcx7iDwtwLgMwwA2LyGgDgvA3j1gieMVYu994n0qPnQu4w-BLHGGffgVdDhcCqTUqAgy8KdIPnvI+U8Z6rzaYfLuYAe593mSvTJ0zJlVxHqsSoBSoy2OblgFxLcbHdNKeUVulzU6pKgMAXgihFYQBvgDJ+MV+px2Wq-Uaa0P5xy-ggn+Wpg4BLAbmEYYx4GIMuig262V7qPTwM9UAODPr4J+twIht4SF-ghjsP8OwSQuiZPIWgOwkB5DJXsb8CJkZ7ExtjMAuN8aE2JmTWR-D5ayOEazdmsjxF8wFtIsRotICKKlrImWcs1Few0bI9WSBNY631kbU2FtrZ2ydi7N2HsfFe2ygnWeNiuCKGQGAZ5p4rRQEUNgO8lUIy2IMpANKvBUKpUgBTS0ch3FcE8UwX1AJDoBDkMzCmlglgPLWIwAAhCEwFYS4p7LWKlEAMxan1Mae1e5tzJhZqaX4DN-t9lZKat3Cm6zDk2JhKWotNjOgAC895HWafEyJDz-DNuQtASp1SbFLNmXGa5NiUlJPoLs0ekyoDVuOdzcpZSI3TszhPG1jznmQDTf0jZGT55jqbk2lt0B10vMCRXAys70mr1nTesohSoCHHHhlSedTUANKafuvOJSomjwwOXeu0yV3PptXmw9Pat1jDTcWvt4ygM5xtXEhJcHJ5gdbdOv9g8DKfqrrfb5D87wLRinNCAA18NxSAA\">subgrid gap\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview-subgrid.png\" alt=\"subgrid gap\" /></a></p>\n<p></p><h2>Text Edge Values</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#text-edge-values\"></a><p></p>\n<p>Text edge values are based of a fonts OpenType meta data.\nIt will also be possible to define these values with css: <a target=\"_blank\" href=\"https://www.w3.org/TR/css-fonts-5/#font-metrics-override-desc\">https://www.w3.org/TR/css-fonts-5/#font-metrics-override-desc</a></p>\n<p>Visualisation of the different text-box-edge values:</p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgB2mATgLYCGANgNwzzJpY5yUCW1pWcYMwC+UKAHoAVJLDAE9AA4JKYAM5wAnvQSqwk8VBnRYC2njzcyBUgAZmsOpQKXb9sADNMZNAHcE3AmA4UgoaBjdPb1RVbgAvEjAAdhsFJBExLDwNSBZTc0trMBAUtKhRKFUEAGM4bi8c2CxKPGVSEFS1THpuPDAndAAKACYAVhGAGiSATknRkYBKNyaWylQeQOCwOxZl5VRtd03t2AtVBXpaDVJLbrIEDHpMKoBrEQAecXEAPig3ypq6mQfrBYG9QMCQZCcAB1AosUHicG-cT-WpeL5AA\"><code>text-box-edge: normal</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--normal-.png\" alt=\"text-box-edge: normal\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFzzJwDcMZKG2qcATgJYC2pWcwVAvlFAHoAVELDAEAGwAOCRmADOcAJ4SE8sEIFRR0WFICGePMwB2BUgAYqsVvsYFTl62ABmmE2gDuCZgWBxSE0xGWwlnNw9UeWYALxIwAHYLKSRefiw8JUhqAyNTczAQZNSoPih5BABjOGZ3bNgsRjxZUhAUhUwJZjwwe3QACgAmAFZhgBpEgE4JkeGASmdG5sZUFj8AsCtqJdlUVRcNrdhjeSkJfSVSUy6TBAwJTEqAa14AHgEBAD4oV4rq2pM31gsFeoCBwIhOAA6vlqCCBGCfgI-jV3J8gA\"><code>text-box-edge: text</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--text-.png\" alt=\"text-box-edge: text\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxjIDcM8yaWOcATgJYC2pWcwlAvlFAPQAqQWGAIANgAcEDMAGc4AT3EI5YQfygjosSQEM8eJgDsCpAAyVYLPQwImLVsADNMxtAHcETAsDiljTAYbcSdXd1Q5JgAvEjAAdnNJJB4+LDxFSCp9QxMzMBAklKheKDkEAGM4Jjcs2CwGPBlSEGT5THEmPDA7dAAKACYAViGAGgSATnHhoYBKJwamhlRmX38wSypFmVQVZ3XN2CM5SXE9RVITTuMEDHFMCoBrHgAefn4APigX8qqa4y+sFgL1AgKB4JwAHU8lRgfxQd9+L9qm4PkA\"><code>text-box-edge: ex</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--ex-.png\" alt=\"text-box-edge: ex\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxjJgCGANgA7AXoJwCWAxgNwzzJpY5wAnZgFtSWOME4BfKFAD0AKgVhgCWggFgAznACeVBFrAK5UZdFg0KePMwB2BUgAZOsYRQEF7z12ABmmHZoAO4IzATAcKR2mALuVL4BQahazABeJGAA7E40SNKyWHi6kFxWNvaOYCC5+VAyUFoIrCyBpbBYAngapCB52phUzHhgnugAFABMAKzTADTZAJwLM9MAlL6d3QKoQhFRYC5cWxqoBn4HR7C2WjRUFLqk9kN2CBhUmKwA1tIAPHJyAB8UF+TRazECwNgsF+oCh0IROAA6pUuDC5HCQXIwa07ICgA\"><code>text-box-edge: ex alphabetic</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--ex-alphabetic-.png\" alt=\"text-box-edge: ex alphabetic\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgDGAhgA4DcM8yaWOcATgJYC2pWcwdAXyhQA9ACoxYYAgA2VBKzABnOAE8ZCJWDEiok6LCoU8edgDsCpAAx1YnCqwLnrtsADNMZtAHcE7AsBwpGaYrPYyrh5eqErsAF4kYADsVlRIgsJYeKqQ9EYm5pZgIKnpUEJQSghkcOyeubBYrHgKpCBpypgy7HhgjugAFABMAKwjADTJAJyToyMAlK5NLayoHAFBYDb0ywqoGm6b27CmSlQyFKqk5t1mCBgymGQA1oIAPCIiAHxQb1U1dTMP1gsDeoGBIMhOAA6oV6KCRODfiJ-rVPF8gA\"><code>text-box-edge: cap</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--cap-.png\" alt=\"text-box-edge: cap\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgDGAhgA5gUA2VwF6CcAlmQNwzzJpY44AJzYBbUljjBuAXyhQA9AColYYAgYIhYAM5wAnnQQ6wShVFXRYVCnjxsAdgVIAGbrFEUhBR6-dgAM0wHNAB3BDYCYDhSB0whTzp-IJDUHTYALxIwAHYXKiRZeSw8fUgeGztHZzAQfMKoOSgdBDJ2YPLYLCE8LVIQAt1MOjY8MG90AAoAJgBWWYAaXIBOJbnZgEp-bt6hVBEomLA3Hh2tVCMAo5PYex0qOgp9UkcRhwQMOkwyAGtZAB4FAoAHxQf4tNpsYKg2Cwf6gGGwpE4ADq1R4cIUCLBCgh7QcwKAA\"><code>text-box-edge: cap alphabetic</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--cap-alphabetic-.png\" alt=\"text-box-edge: cap alphabetic\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgCWeCmBATgIYAOwZAxgNwzzJpY5w1kAtqSxxgHAL5QoAegBUcsMAQAbBghpgAznACeKhFrByZURdFgM6ePGQB2BUgAYOsQXRoF7z12ABmmHZoAO4IZATAcKR2mDTuKr4BQahaZABeJGAA7E4MSJLSWHi6kJxWNvaOYCC5+VBSUFoILHBkgaWwWDSUNKQgedqYKhRgnugAFABMAKzTADTZAJwLM9MAlL5dPagCEVFgLpxbGqgGfvuHsLZaDCp0uqT2w3YIGCqYLADWkgA8MjIAPigPyaLTadiBsFgP1AkKhUMARPacaEyWHAmSg1qBAFAA\"><code>text-box-edge: ideographic</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--ideographic-.png\" alt=\"text-box-edge: ideographic\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgCWeCmBATgIYAOwZAxuZdfU66mQHYBrANwx4yNFhxwaZALakscYCIC+UKAHoAVFrDAEAGwYIaYAM5wAngYRmwWjVF3RYDOnjz8CpAAwjYsnQ0BPy+-mAAZph8aADuCGQEwHCkfJg0gQbhUTGoZmQAXiRgAOw+DEiq6lh4lpCibh5epCDllVBqUGYILHBk0fWwWDSUNC0V5pgGFGDB6AAUAEwArMsANKUAnBsrywCU4cOjqDJJKWB+okcmqDYR55ewnmYMBnSWpPzTfAgYBpgsYQdAA8Gg0AD4oMDur1+nxIbBYMDQAjEYjAET2oiRGhRUI0ML60XBQA\"><code>text-box-edge: ideographic ideographic-ink</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--ideographic-ideographic-ink-.png\" alt=\"text-box-edge: ideographic ideographic-ink\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgCWeCmBATgIYAOwZAxqmQHYDWA3DPMjRYccGmQC2pLHGB8AvlCgB6AFQqwwBABsGCGmADOcAJ5aEBsCqVR10WAzp48nAqQAMfWOLo0Cnd55gAGaYHGgA7ghkBMBwpByYNN5agSFhqAZkAF4kYADsbgxI8opYeMaQ-A5OLqQghcVQClAGCCxwZKGVsFg0lDR1RYaYWhRgvugAFABMAKyzADT5AJxLc7MAlIG9-ahiMXFgHvw7eqhmQYfHsM4GDFp0xqScoxwIGFqYLLxNADxKSgAfFBfq12p0OMDYLBfqAodDoYAie34MKUcJBSjBHVCgKAA\"><code>text-box-edge: ideographic-ink</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--ideographic-ink-.png\" alt=\"text-box-edge: ideographic-ink\" /></a></p>\n<p><a target=\"_blank\" href=\"https://text-box-trim.vercel.app/?c=BYRgBA3gUGYC4FMAecC0AjA9k1CAmA5ggFxgCWeCmBATgIYAOwZAxqmQHYDW5l19TVgG4Y8ZGiw44NMgFtSWOMBEBfKFAD0AKi1hgCADYMENMAGc4ATwMIzYLRqi7osBnTx5OBUgAYRsWToaAk5ffzAAM0wONAB3BDICYDhSDkwaQINwqJjUMzIALxIwAHYfBiRVdSw8S0hRNw8vUhByyqg1KDMEFjgyaPrYLBpKGhaK80wDCjBg9AAKACYAVmWAGlKATg2V5YBKcOHR1BkklLA-USOTVBsI88vYTzMGAzpLUk5pjgQMA0wWFxVAAeDQaAB8UGB3V6-Q4kNgsGBoARiMRgCJ7URIjQoqEaGF9aLgoA\"><code>text-box-edge: ideographic-ink ideographic</code><br />\n<img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/preview--text-box-edge--ideographic-ink-ideographic-.png\" alt=\"text-box-edge: ideographic-ink ideographic\" /></a></p>\n<p></p><h2>Browser Support</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#browser-support\"></a><p></p>\n<ul>\n<li><a target=\"_blank\" href=\"https://caniuse.com/css-text-box-trim\">Can I use</a></li>\n<li><a target=\"_blank\" href=\"https://results.web-platform-tests.org/results/css/css-inline/text-box-trim\">WebPlatformTests</a></li>\n</ul>\n<table>\n<thead>\n<tr>\n<th>Browser</th>\n<th>Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Chrome</td>\n<td><a target=\"_blank\" href=\"https://groups.google.com/a/chromium.org/g/blink-dev/c/tYeALJeWwDc/m/MD4WuN0wBAAJ\">intend to prototype</a></td>\n</tr>\n<tr>\n<td>Firefox</td>\n<td>-</td>\n</tr>\n<tr>\n<td>Safari</td>\n<td><a target=\"_blank\" href=\"https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-163\">Safari Technology Preview 163</a></td>\n</tr>\n<tr>\n<td>Opera</td>\n<td>-</td>\n</tr>\n<tr>\n<td>Edge</td>\n<td><a target=\"_blank\" href=\"https://groups.google.com/a/chromium.org/g/blink-dev/c/tYeALJeWwDc/m/MD4WuN0wBAAJ\">intend to prototype</a></td>\n</tr>\n</tbody>\n</table>\n<p></p><h2>Talks</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#talks\"></a><p></p>\n<p><a target=\"_blank\" href=\"https://fantasai.inkedblade.net/style/talks/atypi-2021/atypi-2021-precise-text-alignment.mp4\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/talk-precise-text-alignment.png\" alt=\"Talk Precise Text Alignment\" /></a></p>\n<p></p><h2>Initial</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#initial\"></a><p></p>\n<p><a target=\"_blank\" href=\"https://lists.w3.org/Archives/Public/www-archive/2018Oct/0004.html\">Initial idea from October 2018</a></p>\n<p></p><h2>Proposal</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#proposal\"></a><p></p>\n<p><a target=\"_blank\" href=\"https://github.com/w3c/csswg-drafts/issues/3240\">w3c/csswg-drafts#3240</a>\n<a target=\"_blank\" href=\"https://www.w3.org/TR/css-inline-3/#propdef-text-box-trim\">https://www.w3.org/TR/css-inline-3/#propdef-text-box-trim</a></p>\n<p></p><h2>Usecases</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#usecases\"></a><p></p>\n<p>Here are some cases where this property can be useful:</p>\n<p></p><h3>Centering text in buttons</h3><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#centering-text-in-buttons\"></a><p></p>\n<p><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples/blob/main/docs/button.webp\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/button.webp\" alt=\"Button\" /></a></p>\n<p>With text-box-trim:</p>\n<div><pre><span>button</span> {\n  <span>text-box-trim</span><span>:</span> both;\n  <span>text-box-edge</span><span>:</span> cap alphabetic;\n  <span>padding</span><span>:</span> <span>10<span>px</span></span>\n}</pre></div>\n<p><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples/blob/main/docs/button-leading-trim.webp\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/button-leading-trim.webp\" alt=\"Button with leading trim\" /></a></p>\n<p></p><h3>Spacing Systems</h3><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#spacing-systems\"></a><p></p>\n<p>Most design systems have a spacing system that is based on multiples of a base unit. For example, a spacing system might have a base unit of 4px, and then multiples of that unit, such as 8px, 12px, 16px, etc. This is a great way to ensure that spacing is consistent across the design system.</p>\n<p>However the added line-height destroys the spacing system:</p>\n<p><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples/blob/main/docs/spacing-system.webp\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/spacing-system.webp\" alt=\"Spacing systems without leading trim\" /></a></p>\n<p></p><h3>Icons</h3><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#icons\"></a><p></p>\n<p>Aligning icons with text is a common problem. With leading trim, you can align the icon with the text:</p>\n<p><a target=\"_blank\" href=\"https://twitter.com/rauchg/status/1590375127136763907?s=46&amp;t=YizBtCVEYqCeqBbJWI6quA\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/icon.jpeg\" alt=\"Icon\" /></a></p>\n<p><a target=\"_blank\" href=\"https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/icon2.png\" alt=\"Icon with leading trim\" /></a></p>\n<p></p><h3>Images</h3><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#images\"></a><p></p>\n<p>In articles images are often placed next to images. The leading trim property allows you to remove the whitespace above the text to align the text with the image.</p>\n<p><a target=\"_blank\" href=\"https://github.com/w3c/csswg-drafts/issues/3240\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/image.png\" alt=\"Image\" /></a></p>\n<p></p><h3>Art</h3><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#art\"></a><p></p>\n<p>Especially in logo design and art leading trim can be used to create aligned different text elements:</p>\n<p><a target=\"_blank\" href=\"https://en.99designs.it/blog/tips/typography-design/\"><img src=\"https://github.com/jantimon/text-box-trim-examples/raw/main/docs/art.jpg\" alt=\"Art\" /></a></p>\n<p></p><h2>Open Issues</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#open-issues\"></a><p></p>\n<ul>\n<li><a target=\"_blank\" href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=1816038\">Firefox Issue 1816038 - [css-inline-3] Implement <code>text-box-trim</code> (formerly <code>leading-trim</code>)</a></li>\n<li><a target=\"_blank\" href=\"https://bugs.chromium.org/p/chromium/issues/detail?id=1411581\">Chromium Issue 1411581 - Implement <code>text-box-trim</code> property</a></li>\n<li><a target=\"_blank\" href=\"https://bugs.webkit.org/show_bug.cgi?id=252161\">Webkit Issue 252161 - [leading-trim] nested elements shift text upwards</a></li>\n</ul>\n<p></p><h2>Related Links</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#related-links\"></a><p></p>\n<ul>\n<li><a target=\"_blank\" href=\"https://www.w3.org/TR/css-inline-3/#leading-trim\">w3.org text-box-trim</a></li>\n<li><a target=\"_blank\" href=\"https://www.w3.org/TR/css-inline-3/#text-box-edges\">w3.org text-box-edge</a></li>\n<li><a target=\"_blank\" href=\"https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202\">Leading-Trim: The Future of Digital Typesetting</a></li>\n<li><a target=\"_blank\" href=\"https://en.99designs.it/blog/tips/typography-design/\">Typography design 101: a guide to rules and terms</a></li>\n<li><a target=\"_blank\" href=\"https://seek-oss.github.io/capsize/\">CapSize</a></li>\n<li><a target=\"_blank\" href=\"https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align\">Deep dive CSS: font metrics, line-height and vertical-align</a></li>\n<li><a target=\"_blank\" href=\"https://kekee000.github.io/fonteditor/index-en.html\">Online fonteditor</a></li>\n</ul>\n<p></p><h2>Credits</h2><a target=\"_blank\" href=\"https://github.com/jantimon/text-box-trim-examples#credits\"></a><p></p>\n<ul>\n<li><a target=\"_blank\" href=\"https://twitter.com/fantasai\">Elika J. Etemad (fantasai)</a> (Spec, Images, Talk)</li>\n<li><a target=\"_blank\" href=\"https://twitter.com/SashimiEthan\">Ethan Wang\n</a> (Images, Talk)</li>\n<li><a target=\"_blank\" href=\"https://en.99designs.it/profiles/mky\">Andrea Stan</a> (Images)</li>\n<li><a target=\"_blank\" href=\"http://twitter.com/iamvdo\">Vincent De Oliveira</a> (Button Image)</li>\n<li><a target=\"_blank\" href=\"https://kanji-database.sourceforge.net/index.html?lang=en\">Kanji Database Project</a> (Image)</li>\n<li><a target=\"_blank\" href=\"https://medium.com/@antonball\">Anton Ball</a> (SubGrid Example)</li>\n</ul>\n</article></div>",
  "author": "",
  "favicon": "https://github.githubassets.com/favicons/favicon.svg",
  "source": "github.com",
  "published": "",
  "ttr": 87,
  "type": "object"
}