Questions tagged [vertical-text]

Refers to text that is written from top to bottom (or bottom to top). This is usually done by rotating or stacking. The purpose could be for UI design or for the natural text direction of some East Asian languages. Please use the [tag:vertical-alignment] tag for text being aligned in separate UI elements.

Vertical text is read from top to bottom or bottom to top. Since most operating systems and programming environments assume a horizontal text direction, this is usually accomplished by either rotating the text 90 degrees or by stacking characters on top of each other.

Purpose

1. For UI design

Oftentimes a side label on the right or left would be too wide if written horizontally. Writing it vertically gives a more pleasing visual effect.

2. For natural text direction

Certain East Asian languages such as Japanese, Chinese, and Mongolian are traditionally written vertically. Although Japanese and Chinese are usually written horizontally today, they are on occasion still written vertically. The traditional Mongolian script (not Cyrillic Mongolian) is still in common usage in Inner Mongolia and is only written vertically for its natural text direction.

Tag Usage

Use this tag for programming questions related to rotating text strings and UI elements or stacking characters in a column. For vertically aligning separate text strings and UI elements, please use the tag.

Related Tags

111 questions
0
votes
1 answer

MFC DrawText, vertical, DT_CALCRECT with lf_escapement = 900

I'm working on a MFC project with some GDI drawings. I use DC.DrawText to draw a vertical text into a DC using a LOGFONT with lfEscapement = 900. The text is output when i use DT_NOCLIP in the desired vertical formatting. However to center this…
0
votes
0 answers

How do I make my list code run vertically instead of horizontal in Shopify?

I have created a vendor page for my Shopify store, and it seems to be running fine, however, now I want it to run the list alphabetically across 4 columns in a vertical setup. Currently, the list runs horizontally across the columns. Could someone…
Bryan Counts
  • 111
  • 1
  • 1
  • 8
0
votes
1 answer

Is it possible to guarantee vertical text in table header?

Year 2019, isn't it still possible to make vertical text in html table header without any tricks and workarounds? I tried table th.vertical { text-align: center; white-space: nowrap; transform-origin: 50% 50%; -webkit-transform:…
Dims
  • 47,675
  • 117
  • 331
  • 600
0
votes
0 answers

How to rotate text in CALS table which is translated into docbook using Apache FOP and Apache Ant?

I am trying to rotate the header row of my CALS table 90 degrees. However, when compiling, the parameters are ignored and the formatting stays the same. The table is in CALS format in an .xsl file, which is translated into DocBook, which is why I…
Johannes M.
  • 13
  • 1
  • 3
0
votes
1 answer

How do I put the vertical text Advertisement to the right of AdSense Ads?

From Google Adsense at https://support.google.com/adsense/answer/4533986?hl=en Labeling ads Publishers have two options for how to label AdSense ad units: You can either label the units with "Advertisements" or "Sponsored Links". No other variations…
Robert Stevens
  • 519
  • 5
  • 9
0
votes
1 answer

What is the use of letter-spacing in vertical layout html

I am trying to understand Japanese vertical htmls. During my analysis i have found that in lot of places content has letter-spacing : . I have rarely used this css style in horizontal content but in JP it has used mostly with…
Pavan Tiwari
  • 3,077
  • 3
  • 31
  • 71
0
votes
1 answer

Having trouble with Vertical Alignment of Text and Rotated Text

I am trying to create a simple Bar Chart, but having huge problems with the CSS. And yes, I have banged my head against D3 for a while but gave up and decided to create my own. Here is my code: Note that it is extracted from a larger page where…
Chiwda
  • 1,233
  • 7
  • 30
  • 52
0
votes
0 answers

CSS-Formatted Text Displays Vertically on Mobile Browser

I'm setting up my new website's CSS file for mobile browsers. One problem: The text is displaying vertically in the second (i.e. bottom for my mobile layout) column. In other words, instead of displaying "Hi, Stack Overflow!" my browser would…
N. Scribner
  • 43
  • 1
  • 8
0
votes
3 answers

Vertically centered text in a dynamic height wrapper

I'd normally just use line-height for vertical centering, but on this occasion the layout I'm working to is a little trickier. I've put together this jsfiddle to show where I'm at so far. All the CSS hacks suggest using table-cell trickery for this…
Ric
  • 458
  • 1
  • 7
  • 23
0
votes
1 answer

How do I align my text vertically within a table cell?

I've been scouring the web for hours now on many different forums, but no one seems to have the answers I need. How do I align my text vertically in a table cell? Like that: But without spaces V E R T I C A L Here is my code: .VerticalText { …
Emma S
  • 3
  • 5
0
votes
1 answer

How can I use proper CSS for a vertical text menu?

I've made the worst CSS for about a vertical rotated sidebar menu. any help to make this proper CSS please? I've tried to rotate list container DIV too. But again I can't control the position here is the menu .slidebar_container { position:…
delizade
  • 1
  • 1
0
votes
2 answers

Auto expand TD according to contained DIV

I have a 3x3 html table. In the second row the first and third column contain div's that are rotated to show content vertically. Other cells show content normally. These vertical divs overflow from TD height. I want to expand TD height dynamically…
Jawaid
  • 99
  • 1
  • 4
  • 17
0
votes
2 answers

formatting vertical text in divs

I'm trying to render column header text vertically, so the columns are narrow. I cannot seem to get the text to rotate and stay within the div. I've made a quick jsfiddle. https://jsfiddle.net/DaveC426914/w674sLbL/9/ My "pre-problem" is that my demo…
DaveC426913
  • 2,012
  • 6
  • 35
  • 63
0
votes
0 answers

How to write vertical text in opera 9.5?

Does somebody know how to draw vertical text in opera 9.5? As I can see in "caniuse", opera 9.5 doesn't support svg, -o-transform: rotate(-90deg), writing-mode:tb-rl and I don't know any methods to do this. Help me please.
Vasya
  • 1
0
votes
1 answer

Why doesn't my text automatically increase the height of the container?

On a shopify site, I have inside of tags code that is supposed to pull the description of a product. Most of it gets cut off because the container has a set width, but I don't understand why it won't just run vertically and increase the height of…
DLateef
  • 231
  • 1
  • 4
  • 17