With the exception of #4, not one of these would pass our code review. Don't get me wrong: I've used all of them, and WAY dirtier hacks besides, but the bottom line is none of them are NECESSARY anymore.
1 Or you COULD use the included display:flex; and related properties, and maintain both readability and semantic syntax.
2 Could do... or instead use the again-included FIGURE html element ("represents self-contained content, potentially with an optional caption, which is specified using the FIGCAPTION element. The figure, its caption, and its contents are referenced as a single unit.") and set a global text-decoration:none; to figcaption. To avoid annoyance.
3 Talk about screwing up some parsers! Try playing with those properties then handing it to someone for machine translation!
If you're concerned about animating the rotation, the transform-origin property is your friend. As to the non-intuitive cardinal directions, if you DO zero out the origin (transform-origin: 0 100%; seems to be most intuitive for most English speakers I've interfaced with. When used on the word "EXAMPLE" it would place origin where you'd expect it, bottom left of the first 'E'. "0 0" will put it at the top-left), as well as establishing the fixed ratio of the dimensions of the text ("position: absolute; font-size: XXXrem; line-height: XXXrem;", where both XXX's are the same value) you'll have no trouble with your mental model when it comes to unexpected orientations.
4 The reason it's based on width has to do with the mapped logical properties "padding-block-start" and "padding-block-end", which themselves have to do with the directionality (direction the language in question is read, like RTL/LTR) and orientation of the text (it's rotation) - the stuff you're mucking about with in #3 - and how it correlates to the correct rendering of the box model output. This is largely a legacy throwback to IE 5/6's need for "layout" on an object if I recall, but it's been years since I've paid attention to those.
Since you're USING a browser with such an implementation inbuilt (and because you've absolutely positioned the elements in #3, functionally removing them from that "layer" of the model) you don't see the layout butchery that takes place if it DIDN'T create these logical properties on the fly.
The "padding-bottom aspect ratio trick" was introduced by Thierry Koblentz (he called them "Intrinsic Ratios") back during his time with Yahoo in May of '09, where he leveraged this behavior for that exact purpose. The article is still floating around the web somewhere; I referred one of our JD's to it only a few months ago.
I suspect that the web's glacial speed to update fundamental standards/embrace deprecation (why we STILL support IE AT ALL, instead of just displaying a "Upgrade to a Real Browser" message, web-wide) is why it's never been corrected. Besides: in fairness, it works, and new devs are being taught it now as "expected behavior".
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
With the exception of #4, not one of these would pass our code review. Don't get me wrong: I've used all of them, and WAY dirtier hacks besides, but the bottom line is none of them are NECESSARY anymore.
1 Or you COULD use the included display:flex; and related properties, and maintain both readability and semantic syntax.
2 Could do... or instead use the again-included FIGURE html element ("represents self-contained content, potentially with an optional caption, which is specified using the FIGCAPTION element. The figure, its caption, and its contents are referenced as a single unit.") and set a global text-decoration:none; to figcaption. To avoid annoyance.
3 Talk about screwing up some parsers! Try playing with those properties then handing it to someone for machine translation!
If you're concerned about animating the rotation, the transform-origin property is your friend. As to the non-intuitive cardinal directions, if you DO zero out the origin (transform-origin: 0 100%; seems to be most intuitive for most English speakers I've interfaced with. When used on the word "EXAMPLE" it would place origin where you'd expect it, bottom left of the first 'E'. "0 0" will put it at the top-left), as well as establishing the fixed ratio of the dimensions of the text ("position: absolute; font-size: XXXrem; line-height: XXXrem;", where both XXX's are the same value) you'll have no trouble with your mental model when it comes to unexpected orientations.
4 The reason it's based on width has to do with the mapped logical properties "padding-block-start" and "padding-block-end", which themselves have to do with the directionality (direction the language in question is read, like RTL/LTR) and orientation of the text (it's rotation) - the stuff you're mucking about with in #3 - and how it correlates to the correct rendering of the box model output. This is largely a legacy throwback to IE 5/6's need for "layout" on an object if I recall, but it's been years since I've paid attention to those.
Since you're USING a browser with such an implementation inbuilt (and because you've absolutely positioned the elements in #3, functionally removing them from that "layer" of the model) you don't see the layout butchery that takes place if it DIDN'T create these logical properties on the fly.
The "padding-bottom aspect ratio trick" was introduced by Thierry Koblentz (he called them "Intrinsic Ratios") back during his time with Yahoo in May of '09, where he leveraged this behavior for that exact purpose. The article is still floating around the web somewhere; I referred one of our JD's to it only a few months ago.
I suspect that the web's glacial speed to update fundamental standards/embrace deprecation (why we STILL support IE AT ALL, instead of just displaying a "Upgrade to a Real Browser" message, web-wide) is why it's never been corrected. Besides: in fairness, it works, and new devs are being taught it now as "expected behavior".