User Tools

Site Tools


harlowe:text-rotate

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

harlowe:text-rotate [2017/10/09 20:39] (current)
Line 1: Line 1:
 +**(text-rotate:​ // [[harlowe:​Number|Number]]//​) -> //​[[harlowe:​Changer|Changer]]//​**
  
 +This styling [[harlowe:​Command|Command]] visually rotates the attached hook clockwise by a given [[harlowe:​number|number]] of
 +degrees. The rotational axis is in the centre of the hook.
 +
 +=== Example usage: ===
 +
 +''​%%(text-rotate:​45)[Tilted]%%''​ will produce <​html><​span style="​display:​inline-block;​transform:​rotate(45deg);"></​html>​Tilted<​html></​span></​html>​
 +
 +=== Details: ===
 +
 +The surrounding non-rotated text will behave as if the rotated text is still in its original position -
 +the horizontal space of its original length will be preserved, and text it overlaps with vertically will
 +ignore it.
 +
 +A rotation of 180 degrees will, due to the rotational axis, flip the hook upside-down and back-to-front,​ as
 +if the [[harlowe:​text-style|(text-style:​)]] styles "​mirror"​ and "​upside-down"​ were both applied.
 +
 +Due to browser limitations,​ hooks using this macro will have its CSS ''​%%display%%''​ attribute
 +set to ''​%%inline-block%%''​.
 +
 +=== See also: ===
 +
 +[[harlowe:​text-style|(text-style:​)]]
harlowe/text-rotate.txt ยท Last modified: 2017/10/09 20:39 (external edit)