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
1
vote
0 answers

vertical hover drop down menu with hover links appearing in same list

I'm super new to coding, and I'm wondering if you can help me out with this. I'm trying to create a drop down menu that appears when you hover over a link "Exile" in a vertical list of links. The vertical list of links is simple and looks like the…
1
vote
2 answers

How would I get my histogram to output the data vertically?

So I have the data to output like this for example progress 1: * progress-moduletrailer 4: **** do_not_progress 6:****** exclude 2: ** But I would want it to show it like this progress 2: ** etc I would appreciate any help…
1
vote
2 answers

Fixed sidebar with responsive vertical text

I would like to know how to make my left sidebar position fixed and at the same time keep the vertical text buttons (ABOUT, GALLERY, CONTACT) responsive to the window height. https://jsbin.com/yaniluy/edit?html,css,output My webpage main content…
1
vote
0 answers

CSS shape-outside not compatible with writing-mode vertical-rl

The CSS property shape-outside seems not to be compatible with the CSS property writing-mode with value vertical-rl. For example, if I try to have a vertical text following a triangle shape, it doesn't work: .triangle { width: 100%; height:…
RotS
  • 2,142
  • 2
  • 24
  • 30
1
vote
2 answers

how we can make text direction in table headers make from bottom to top?

how we can make text direction in table headers make from bottom to top? The following code works for Chrome. But it doesn't work for Firefox. Is it possible to have universal code for all browsers? .vert_dir { transform: rotate(180deg); …
Avrob
  • 533
  • 2
  • 10
  • 20
1
vote
1 answer

How does vertical text work for table cells in the paged media module?

I work with the Antenna House Formatter tool (v6.3) in order to render PDF files out of html documents with attached css3 (paged media module). I want to rotate the text in a table cell by 90° counter-clockwise. The height of the rotated table cell…
1
vote
3 answers

Vertically Render content:attr(data-content) in CSS

I would like to render text vertically one by one using CSS. If using rotation method, we can get like below, But I am expected to render the text like below, Could anybody tell me your suggestion on this? Note: I am setting this text using…
Ponmalar
  • 6,871
  • 10
  • 50
  • 80
1
vote
1 answer

Issue with displaying vertical and diagonal letters - C Programming

I'm totally new to C Programming and I'm trying to create a Word Search . I've got a list of words , where only 4 are randomly picked. These 4 words than are to be printed in a grid horizontally, vertically or diagonally, however I can only get…
Takari
  • 29
  • 2
  • 3
  • 8
1
vote
1 answer

Table cell with vertical text direction in HTML to .DOCX with docx4j

I'm trying to convert an html table with text in vertical direction to docx with docx4j. This is my code:
Garrizano
  • 150
  • 1
  • 8
1
vote
1 answer

Vertical text using pure CSS is inconsistent across browsers

I started my code based on this example: https://gist.github.com/aiboy/7406727 I don't want the 90 degree variant but the 270 degree, so reading direction running from bottom to top. In IE11 the text runs from top to bottom. In Chrome it runs from…
Adam
  • 6,041
  • 36
  • 120
  • 208
1
vote
1 answer

How to vertically align (justify) multiple elements

I am not quite sure how to say what I want but I am going to try. I want to vertically align three different elements, all three wrapped in individual divs. Currently this is my code: .service_info { margin-top: 45px; clear: both; …
1
vote
1 answer

How to align Japanese texts vertically within a blog post?

I want to align East Asian texts vertically in a blog post but have no knowledge of CSS. I want it to look like this https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/css3writingModes/japanese-upright.html . I tried to do it in my blog but…
KouShun
  • 11
  • 1
1
vote
1 answer

CSS vertical text needs to much space

I'm using CSS to create vertical text. The Problem is, I want to have the text next to the previous div and no space between or after. How can I fix this this?
here is some stuff
skyscraper
  • 37
  • 3
1
vote
1 answer

Set vertical text correctly on table header cells

I'm not sure how do deal with this anymore - please see screenshot: the table header cell has one style - height: 166px; then each table cell header contains a span with this style properties margin-bottom: 10px; padding: 0 .5em; writing-mode:…
David
  • 4,235
  • 12
  • 44
  • 52
1
vote
2 answers

CSS3 Vertical text banner to left of content

I am no guru when it comes to CSS and I wanted to create a web page layout using CSS only if possible. The layout that I would like is to have two divs, one containing a banner and the other containing the content of the page with the banner to the…