TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

CSS Text Box Trim

222 pointsby bpierreabout 1 year ago

15 comments

alberthabout 1 year ago
Typography<p>The two most needed CSS properties for better web typography are Text-Box-Trim, as well as Margin-Trim<p>Please browser dev’s, implement both of these.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;margin-trim" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;margin-trim</a><p>—-<p>Here’s a JS hack in the mean-time:<p><a href="https:&#x2F;&#x2F;seek-oss.github.io&#x2F;capsize&#x2F;" rel="nofollow">https:&#x2F;&#x2F;seek-oss.github.io&#x2F;capsize&#x2F;</a>
评论 #40251088 未加载
评论 #40251337 未加载
评论 #40268717 未加载
murermaderabout 1 year ago
Related blog post, that was recently submitted to HN: Hardest Problem in Computer Science: Centering Things (<a href="https:&#x2F;&#x2F;tonsky.me&#x2F;blog&#x2F;centering&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tonsky.me&#x2F;blog&#x2F;centering&#x2F;</a>).<p>This feature would fix alot of the problems with centering fonts (icon and text) vertically, which is currently not really possible, at least not easily.
achairapartabout 1 year ago
This will be very useful, especially for vertical aligning, but as of today is essentially unsupported:<p><a href="https:&#x2F;&#x2F;caniuse.com&#x2F;css-text-box-trim" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;css-text-box-trim</a>
评论 #40248903 未加载
bbxabout 1 year ago
I hope this will finally stop developers from setting line-height: 1; on text inputs which cuts off the top and bottom parts of some letters. Even Google developers make this mistake.
tsujpabout 1 year ago
FINALLY!!<p>For 12 years visually vertically centreing text has required adding a padding or margin of a few pixels to the bottom or top, now (when adopted) it can be done properly.
lominmingabout 1 year ago
Much needed feature for typography! The biggest pain is when I need to visually vertically center a text with an icon. If you have an [ICON] followed by upper case character (e.g. Hello), the (H) will always visually look too high to be vertically centered with the [ICON] because the actual height of the text that is calculated always account for hanging characters like &quot;g, y&quot;, etc.
评论 #40251708 未加载
baggy_troughabout 1 year ago
How about a property for &quot;largest font size that will make this text fit in the box without wrapping&quot;?
评论 #40249120 未加载
mortenjorckabout 1 year ago
I had always wondered why Figma supports this when there doesn’t appear to be any support for it in the wild (web or native). Nice to see the W3C draft is looking fairly mature at this point.
qingcharlesabout 1 year ago
The TFA is such a nice in-depth introduction to the properties. Respect to the authors for the work they put in explaining it.
Ian_Machariaabout 1 year ago
Really cool. I&#x27;m currently building a text animation library and this should solve a lot of the margin issues that I&#x27;ve faced
kennydudeabout 1 year ago
How strange after seeing this after pulling my hair out the other day about this exact issue. If only it was implemented today!
recursiveabout 1 year ago
I don&#x27;t really understand what this is doing that margins aren&#x27;t.
评论 #40249253 未加载
评论 #40249172 未加载
评论 #40249350 未加载
cynicalsecurityabout 1 year ago
Okay, but first let&#x27;s wait for 10 years until it&#x27;s going to be supported by every device out there.<p>Bookmarked, will get back to it in 10 years.
Invizabout 1 year ago
This is currently technically possible by customizing font face definition, right?
LoganDarkabout 1 year ago
Yes. Please. I need this so much. This would solve so many of my issues with text alignment.