BoltWire

Rotate

Docs > Extensions > Plugins > Rotate

BoltWire comes with some handy text rotation capabilities. One is built into the core, and the other is available as an extension function. They are both pretty easy to use, but doing this in CSS does require a slight bit of finagling to get the positioning just right. Here's how it works.

First, let's look at the core feature. Starting in BoltWire 7.08 you can add "rotate" to a table row and the entire row will be rotated. For example: consider this:



But you may want to resize the rotated table cells. If so you can set a "h" and "w" parameter for height and width. Here's an example with bigger cells:



You'll notice now the text is slight off center. Here's where the finagling comes in! You can also set an "l" and "t" parameter to shift the text over from the left, and from the top. After playing with it a bit, I get it centered, and just for fun put some space at the top:



If you are interested, the default settings are w=100, h=30, l=14, and 5=5. You can tweaks things from there.

There's also a rotater plugin that works similarly. Here you just put some text into the rotater function:




If you want to do something more fancy, you could try something like this (using the css tricks plugin to generate the pink background:




Everything should load and work automatically.