Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML/CSS : How to write a text vertically, keeping the characters horizontally

Tags:

html

css

I'm wondering if we could write a vertically text, but without use a rotation of any hacks that change the characters direction.

So, instead of "START", I want a text in may div displayed like this :
S
T
A
R
T

I could use "break-word: word-break" and set the width of my element to 0, but the text would'nt be centered. Characters will just be aligned to the left

Not a duplicate of : Vertical Text Direction
I don't want to rotate the text, I want to preserve character's direction

Here is a code example of what I can get :

.vertical-text {
    font-size: 25px;
    word-break: break-word;
    width: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
 }
 
 body, html {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%
 }
<div class="vertical-text">START IT<div>
like image 505
Mattew Eon Avatar asked Aug 03 '17 09:08

Mattew Eon


People also ask

How do you make text vertical in CSS?

To create vertically oriented text, you need to set text-orientation in CSS to upright along with writing -mode set to vertical-lr. As we discussed earlier, CSS text-orientation will only function if the writing-mode property is set to vertical (either vertical-rl or vertical-lr) and not horizontal (horizontal-tb).

How do you change from vertical to horizontal in HTML CSS?

Use Padding property Horizontally: Padding property is used to set the element align to Horizontally by using left and right padding. Output: Use Padding property Vertically: Padding property is used to set the element align to Vertically by using top and bottom padding.

How do you change text direction in HTML?

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb ). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.


Video Answer


1 Answers

You may use the writing-mode CSS property in conjunction with the text-orientation CSS property.

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

To quote, writing-mode property..

[..]specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.

In effect, this defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

text-orientation property defines the orientation of the text characters in a line. This property only has an effect in vertical mode.

Example:

p:first-of-type {
  writing-mode: vertical-lr;
}
p:last-of-type {
  writing-mode: vertical-lr;
  text-orientation: upright;
}
<h4>With writing mode "vertical-lr"</h4>
<p>Start</p>
<hr>
<h4>With writing mode "vertical-lr" and text-orientation "upright"</h4>
<p>Start</p>

Be warned though about text-orientation:

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

According to this: https://caniuse.com/#search=text-orientation, it seems nearly all browsers support it as of today, except IE/Edge.

like image 121
Abhitalks Avatar answered Oct 16 '22 01:10

Abhitalks