Bootstrap vertical writing

Question

I want to write text with Bootstrap, vertically but not like transform the text 90°. Vertical, but turned and hard to read.

But actually written like this: Vertical and not turned

I think there was a way to do this with Bootstrap? Do you know something?

I believe that Bootstrap does not provide such functionality. I guess there would be a CSS-only solution. — Tasos K., Dec 19 '15 at 12:53
Also, a google search on the topic returns a bunch of examples e.g. http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284 — Tasos K., Dec 19 '15 at 12:54

score 15 · Accepted Answer · edited Oct 05 '20 at 19:37

15

You can do something like this:

CSS
      .verticaltext{
           width:1px;
           word-wrap: break-word;
           white-space:pre-wrap; 
        }

edited Oct 05 '20 at 19:37

Diego Venâncio

5,698
2
49
68

answered Dec 19 '15 at 13:04

CastenettoA

673
5
17

Thanks you. However it's a CSS hack, use it responsibly – CastenettoA Dec 22 '15 at 12:21

score 8 · Answer 2 · answered Oct 23 '18 at 07:56

writing-mode: vertical-rl;
text-orientation: mixed;

// or

writing-mode: vertical-rl;
text-orientation: upright;

Also try these values

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

score 7 · Answer 3 · edited Jan 17 '18 at 15:37

7

You may want to see this tutorial!
https://davidwalsh.name/css-vertical-text

In simplicity, you can use CSS to do this.

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
}

edited Jan 17 '18 at 15:37

eric

7,142
12
72
138

answered Dec 19 '15 at 15:31

vik1245

546
2
9
26

score -4 · Answer 4 · answered Dec 19 '15 at 12:55

-4

There is absolutely no specific way in Bootstrap nor in CSS alone to write in his particular way ...

I guess the only way to do that kind of thing is to make a return to the line after every letter. Try the HTML <br> tag for example. The major issue with that kind of technique is semantics, considering the word will be split.

answered Dec 19 '15 at 12:55

Martin Campillo

24
4

1

Please no use
! Don't use HTML for styling the web page! – CastenettoA Dec 19 '15 at 13:06
1

This answer is simply wrong and should probably be deleted. – eric Jan 17 '18 at 15:16

Bootstrap vertical writing

4 Answers4