An Interest In:
Web News this Week
- May 1, 2024
- April 30, 2024
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
The Easiest Way to Create Vertical Text with CSS
Earlier this morning, I needed to create vertical text for a project I'm working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we'll go over today!
Method 1: <br>
Tags
So, one possible (though not recommended) way to achieve vertical text is to add <br>
tags after each letter.
<h1>
V <br />E <br />R <br />T <br />I <br />C <br />A <br />L
</h1>
Don't use this method. It's lame and sloppy.
Method 2: Static Wrapping
With this method, we wrap each letter in a span, and then set its display
to block
within our CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1>
<span> V </span>
<span> E </span>
<span> R </span>
<span> T </span>
<span> I </span>
<span> C </span>
<span> A </span>
<span> L </span>
</h1>
</body>
</html>
The problem with this solution -- other than the frightening mark-up -- is that it's a manual process. If the text is generated dynamically from a CMS, you're out of luck. Don't use this method.
Method 3: Use JavaScript
My initial instinct was to dynamically add the span
tags with JavaScript. That way, we get around the issues mentioned in method two.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1> VERTICAL </h1>
<script>
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
</script>
</body>
</html>
This method is definitely an improvement. Above, we split
the text into an array, and then wrap each letter in a span
. While we could use something like a for
statement, or $.map
to filter through the array, a far better and quicker solution is to manually join and wrap the text at the same time.
Though better, this solution isn't recommended. And, here are two reasons why.
- Will this break your layout if JavaScript is disabled?
- Ideally, we should be using CSS for this task, if possible.
Method 4: Apply a Width to the Container
Let's get away from JavaScript if we can. What if we applied a width to the container element, and forced the text to wrap? That could work.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1> VERTICAL </h1>
</body>
</html>
In this scenario, we apply a very narrow width to the h1
tag, and then make its font-size
equal to that exact value. Finally, by setting word-wrap
equal to break-word
, we can force each letter onto its own line. However, word-wrap: break-word
is part of the CSS3 specification, and is not compliant across all browsers.
Excluding older browsers, this seemingly solves our problem...but not entirely. The demo above does appear to work, but it's too risky to play with pixel values. Let's try something as simple as turning the uppercase letters into lowercase.
Method 5: Apply letter-spacing
As a precaution, and to extend method four, why don't we apply fairly large letter-spacing
to get around this issue?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
letter-spacing: 20px; /* Set large letter-spacing as precaution */
}
</style>
</head>
<body>
<h1> VERTICAL </h1>
</body>
</html>
That seems to fix the issue, though, again, we're using a bit of CSS3 here.
Method 6: Use em
Alternatively, there's a one-liner solution. Remember when we learned that applying overflow: hidden
to a parent element would miraculously make it contain its floats? This method is sort of like that! The key is to use em
, and place a space between each letter.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 {
width: 1em;
font-size: 40px;
letter-spacing: 40px; /* arbitrarily large letter-spacing for safety */
}
</style>
</head>
<body>
<h1> V E R T I C A L </h1>
</body>
</html>
Pretty neat, right? And, this way, you can apply any font size that you wish. Because we're using em
-- which is equal to the x-height
of the chosen font -- we're then provided with a lot more flexibility.
But, once again, sometimes more than one letter will end up on a line. You have to be safe; that's why I've applied arbitrarily large letter-spacing
to ensure that there's never more than one letter on a line.
To my knowledge at this time, this is the best, most cross-browser compliant solution.
Method 7: Whitespace
One last way to achieve this effect is to take advantage of the white-space
property.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1 { white-space: pre; }
</style>
</head>
<body>
<h1>
V
E
R
T
I
C
A
L
</h1>
</body>
</html>
By setting white-space
to pre
, that instructs the text to behave as if it was within a pre
tag. As such, it honour any spacing that you've added.
Method 8: Using writing-mode
Our next method is one of the newest in town. We have a property called writing-mode
in css to help us write vertical text.
Pairing writing-mode
, and text-orientation
will help you achieve this goal. What writing-mode
does is change the direction in which the text is written. You can change the direction from horizontal, top to bottom (well, this is the default option for writing-mode), or vertical right to left, or vertical left to right. This is how simple the whole writing direction gets. You need to be careful if the application would be seen in ancient browsers. Because, the property is unavailable in older browsers. In case you want writing-mode
to work in older browsers, add the following:
- Horizontal top-to-bottom:
writing-mode: lr
- Vertical right-to-left:
writing-mode: tb-rl
- Vertical top-to-bottom:
writing-mode: tb-lr
Next, we choose to change the direction of the characters. This is where text-orientation
property becomes useful. There are three options to choose from: mixed
, upright
and sideways
, where mixed
is the default setting.
Method 9: Using Transform
Finally, let's deal with a funky alternative if all of the above modern-browser compatible solutions fail. If writing-mode does not work, due to some reason, you can leverage the transform: rotate(90deg) property. This will rotate the text in clockwise direction. Of course, if you want the text to be rotated in the other direction, make it rotate(-90deg).
Undeniably, this method is extremely inconvenient. You certainly have all the other options, to turn vertically turn text.
Conclusion
There were days, when developers pondered shouldn't there be a CSS3 rule to accomplish this task? What if I could set something along the lines of: font-display: letter-block;
which would instruct each letter to be rendered as a block of sorts? Well, now you have options like writing-mode
and text-orientation
to achieve vertical text.
This post has been updated with contributions from Divya Dev. Divya is a front-end developer more than a half a decade of experience. She is a grad and gold medalist from Anna University.
Original Link: https://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284
TutsPlus - Code
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.More About this Source Visit TutsPlus - Code