Rotating and vertically align text from bottom to top

  • Resolved dotwongdotcom

    (@dotwongdotcom)


    6 years, 2 months ago

    Hi Tobias! Thanks for your wonderful plugin. It’s saved me a lot of time and effort.

    I’m at a loss with a bit of a problem that I can’t seem to solve, though. Hoping you can help me out.

    I have a table that has long headers. I’m trying to rotate the text so that it runs from the bottom of the cell to the top. I’ve tried a combination of writing-mode: vertical-rl; and transform: rotate(-180deg);.

    The best I can seem to come up with is adding a translateY(-100%) to the transform property. That manages to line up the text the way I’d like it to the bottom of the table cell, but now I can’t figure out how to move the whole thing back down to align properly.

    Scroll down the link I attached to see the table.

    I’ve been pulling my hair out all afternoon. Any ideas would be much appreciated. Or if you have any ways to do this other than using writing-mode, I’m open to those too.

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter dotwongdotcom

    (@dotwongdotcom)

    Nevermind! I figured it out on my own. Adding transform-origin: center center; did the trick.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Great to hear that you already found a solution! And thanks for sharing that idea with transform-origin! I’ll have to keep that in mind!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Rotating and vertically align text from bottom to top’ is closed to new replies.