If you've ever needed a piece of vertical text for your design, then you know how frustrating it can be to develop. Unnecessary wrapper divs, applying rotation, transform origin, but it never looks quite right.
Well, you're in luck since there is a better, easier and more responsive way to create any vertical text!
Text-Orientation CSS
This trick involves a CSS property you probably haven't heard of, "text orientation." Although it's not possible to edit this property directly in the editor, you can do so with a very short custom code snippet.
For demonstration purposes, I created this very simple layout with an image and a text block with a 'horizontal-text' class on top of the image.
Now, let's rotate the text. All that's needed is the following code snippet:
I recommend putting custom CSS code in the page or project settings, inside the <head> tag. The effect will only be visible on the published website, not in Designer.
If you want to also be able to preview this effect in Designer, you can add an embed element anywhere on the page, and paste the code there instead.
If you're interested in learning more about this CSS property, you can read the documentation here:
Occasionally, especially with more complex designs, the vertical text element can move in weird ways, to places you don't want it to. From my experience, that happens mostly on Safari and/or Firefox.
One fix that always works for me in these cases is adding the following custom CSS to the class of the direct parent element of the text.
.parent-div{display: contents}
Troubles with Custom Code
In the case that your custom code snippet is not working, try checking the following:
• Class names - although Webflow will let you have capital letters and spaces in class names, it is not allowed in custom code CSS. Every capital letter in Webflow needs to be lowercase in custom code. Similarly, all spaces need to be replaced with a '-' dash. Example: Class name 'Div block 3' will be written like so: 'div-block-3'
• Style tags - make sure that all of your code is wrapped in <style> tags
• Dot in front of class name - when writing custom CSS, the first part is the selector that the styles inside the curly brackets will be applied to. There are different types of selectors, and in a case of classes, it is a '.' dot.
.png%3Ftable%3Dblock%26id%3D933e7046-022d-4407-861c-32e2160094b5%26cache%3Dv2?width=1500&optimizer=image)
.webp%3Ftable%3Dblock%26id%3D43ed53c5-9c8b-42de-bf00-a884d62d048b%26cache%3Dv2?width=1500&optimizer=image)
.webp%3Ftable%3Dblock%26id%3D4c82e600-726d-4711-9446-ee7b9367b5d9%26cache%3Dv2?width=1500&optimizer=image)
