To Infinity but Not Beyond

Summary

Previously on meyerweb, I explored ways to do strange things with the infinity keyword in CSS calculation functions. There were some great comments on that post, by the way; you should definitely go give them a read. Anyway, in this post, I’ll be doing the same thing, but with different properties! When last we met, I’d just finished up messing with font sizes and line heights, and that made me think about other text properties that accept lengths, like those that indent text or increase the space between words and letters. You know, like these: div:nth-of-type(1) {text-indent: calc(infinity * 1ch);} div:nth-of-type(2) {word-spacing: calc(infinity * 1ch);} div:nth-of-type(3) {letter-spacing: calc(infinity * 1ch);} <div>I have some text and I cannot lie!</div> <div>I have some text and I cannot lie!</div> <div>I have some text and I cannot lie!</div> According to Frederic Goudy, I am now the sort of man who would steal a infinite number of sheep. Which is untrue, because, I mean, where would I put them? Consistency across Firefox, Chrome, and Safari Visually, these all came to exactly the same result, textually speaking, with just very small (probably line-height-related) variances in element height. All get very large horizontal overflow scrolling, yet scrolling out to the end of that overflow reveals no letterforms at all; I assume they’re sat just offscreen when you reach the end of the scroll region. I particularly like how the “I” in the first <div> disappears because the first line has been indented a few million (or a few hundred undecillion) pixels, and then the rest of the text is wrapped onto the second line. And in the third <div>, we can check for line-leading steganography! When you ask for the computed values, though, that’s when things get weird. Text property results Computed value for… Browser text-indent word-spacing letter-spacing Safari 33554428px 33554428px 33554428px Chrome 33554400px 3.40282e+38px 33554400px Firefox (Nightly) 3.40282e+38px 3.40...