Recently, I received a message about an issue related to CSS writing-mode and transform not working when trying to apply vertical text in emails. The person had already separated their HTML and CSS files, but for some reason, the CSS wasn’t being fetched properly. After testing in two different editors (VSCode and Atom), they were still facing the same issue. Let’s explore possible causes and solutions.
Understanding the Problem
In emails, CSS support is limited compared to regular web browsers. Advanced properties like writing-mode and transform often don’t work properly in many email clients, which strips certain styles, making it challenging to apply vertical text or other layout changes.
Error Script
Here’s a common error that users may face when trying to use external CSS files or advanced properties in emails:
<!-- HTML File -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="vertical-text">
Vertical Text Example
</div>
</body>
</html>
<!-- styles.css -->
.vertical-text {
writing-mode: vertical-rl;
transform: rotate(90deg);
}
The writing-mode and transform properties may not work in many email clients due to lack of support.
Why CSS Properties Fail in Emails
Most email clients don’t fully support CSS, especially for advanced styles like writing-mode and transform. Email platforms use outdated rendering engines that strip or ignore many modern CSS properties, causing these issues.
Practical Solution for Vertical Text in Emails
For email compatibility, inline CSS is often the best solution. Here’s how to implement vertical text in emails using inline styles and fallback options:
<!-- HTML File with Inline CSS for Email Compatibility -->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.vertical-text {
display: inline-block;
transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* For Safari */
-moz-transform: rotate(90deg); /* For Firefox */
-ms-transform: rotate(90deg); /* For IE */
-o-transform: rotate(90deg); /* For Opera */
writing-mode: vertical-rl; /* Vertical text */
}
</style>
</head>
<body>
<div class="vertical-text">
Vertical Text Example
</div>
</body>
</html>
This approach ensures better compatibility across various email clients.
Alternative Approach Using Images
In cases where vertical text is a must, and CSS transforms aren’t reliable, you can consider using images with pre-rendered vertical text. This ensures that the design appears correctly in all email clients.
Ensuring Your CSS is Linked Correctly
If you are using an external CSS file, make sure the path to your CSS file is correct:
<link rel="stylesheet" href="path/to/your/styles.css">
Additionally, test your email in different email clients to see how it renders.
Best Practices for CSS in Emails
- Use Inline Styles: Always prefer inline styles over external CSS files.
- Test Across Clients: Email clients like Gmail, Outlook, and Apple Mail render emails differently. Test in multiple clients.
- Keep it Simple: Avoid using advanced CSS features unless necessary, as they may not be supported.
- Fallback Solutions: Provide fallback styles or images for unsupported features.
- Use Tables: Sometimes, basic HTML tables are more reliable for layout purposes in emails.
Conclusion
Emails require careful consideration when using CSS, especially for properties like writing-mode and transform. By using inline styles and testing across different clients, you can ensure your email looks as intended. For vertical text, consider simple workarounds like rotating text or using images.