In Flint, the text rotation property empowers users to rotate displayed text at angles of 90, 180, and 270 degrees. This feature facilitates the manipulation of text orientation for various design and layout purposes.
90-Degree Rotation: Text rotated by 90 degrees appears in a vertical orientation. Each character is stacked vertically, from top to bottom.
180-Degree Rotation: Text rotated by 180 degrees appears upside-down compared to its default orientation.
270-Degree Rotation: Similar to the 90-degree rotation, text rotated by 270 degrees appears in a vertical orientation, but in the opposite direction. Each character is stacked vertically from bottom to top.
Here’s a detailed description of how text rotation works in Flint, along with some example images for better understanding.
Text rotation with Alignment and Margin Settings:
Alignment settings determine how text is positioned within its container, while margin settings manage the space surrounding the text within the container, ensuring readability and visual balance.
Flint applies the margin settings first, then rotates the text based on the settings and finally places the content as per the alignment.
The below screenshots depict how text rotation combined with vertical and horizontal alignment works when the margins are set as left-10, top-10, right-5, and bottom-5 (the yellow dotted line indicates the text area, while the red-dotted line indicates the margins).
Left-Top Alignment: Text is positioned at the left-top corner of its container, and when rotated 90°, it begins from the right-top and extends downwards. At 180°, it appears upside-down and aligned towards the right-bottom. At 270°, it initiates from the left-bottom and extends upwards.
Left-Middle Alignment: Text is positioned along the vertical center and left edge of its container. When rotated 90°, it begins from the center-top and extends downwards. At 180°, it appears upside-down and aligned towards the right middle. At 270°, it initiates from the center-bottom and extends upwards.
Left-Bottom Alignment: Text is positioned at the bottom-left corner of its container. When rotated 90°, it begins from the left-top and extends downwards. At 180°, it appears upside-down and aligned towards the right-top. At 270°, it initiates from the right-bottom and extends upwards.
Center-Top Alignment: Text is positioned at the top-center of its container. When rotated 90°, it begins from the right-middle and extends downwards. At 180°, it appears upside-down and aligned towards the center-bottom. At 270°, it initiates from the left-middle and extends upwards.
Center-Middle Alignment: Text is centered within its container, maintaining equal spacing on both sides irrespective of rotation. While the text’s position may shift with margin adjustments, its alignment remains center-middle throughout.
Center-Bottom Alignment: Text is positioned at the bottom-center of its container. When rotated 90°, it begins from the left-middle and extends downwards. At 180°, it appears upside-down and aligned towards the center-top. At 270°, it initiates from the right-middle and extends upwards.
Right-Top Alignment: Text is positioned at the top-right corner of its container. When rotated 90°, it begins from the right-bottom and extends upwards. At 180°, it appears upside-down and aligned towards the left-bottom. At 270°, it initiates from the left-top and extends downwards.
Right-Middle Alignment: Text is positioned along the vertical center and right edge of its container. When rotated 90°, it begins from the center-bottom and extends upwards. At 180°, it appears upside-down and aligned towards the left-middle. At 270°, it initiates from the center-top and extends downwards.
Right-Bottom Alignment: Text is positioned at the bottom-right corner of its container. When rotated 90°, it begins from the left-bottom and extends upwards. At 180°, it appears upside-down and aligned towards the left-top. At 270°, it initiates from the right-top and extends downwards.
