Slanted/ tilted text using css

Sprock · September 2016

A second (and hopefully last) question. I am using Sugarcane in Twine 1.x

I'm trying to get the text in a passage to displayed as a rotated angle.

At the moment my css looks like this:

.slanted {
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-o-transform: rotate(16deg);
writing-mode: lr-tb;
}

Neither using the span tags nor tagging the stylesheet and the passage seems to achieve anything.

Any thoughts?

Many thanks,
Sprock

P.S. And good luck to anyone else competing in this year's IF Comp!

greyelf · September 2016

I believe your issue may be due to you using an element which is displayed inline (like span) instead of using one which is displayed either as a block or modified to be an inline-block.

For example, if you used HTML like the following:

<span class="slanted">This should appear slanted at 20 degrees</span>

... then CSS like the following will result in slanted text:

.slanted {
	display: inline-block;
	-webkit-transform: rotate(16deg);
	-moz-transform: rotate(16deg);
	-o-transform: rotate(16deg);
	-ms-transform: rotate(16deg);
	transform: rotate(16deg);
}

Sprock · September 2016

That did the trick! Ah~ you gals/guys are a God send! Thank you

Howdy, Stranger!

Categories

Slanted/ tilted text using css

Comments