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
1 answer

Vertically align vertical text in SlickGrid header

I am changing the height of a SlickGrid header and rotating the text in the header with the following CSS: .slick-column-name { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); …
i--
  • 153
  • 3
  • 13
1
vote
1 answer

Vertically Aligning Text - Not displaying properly in IE8

Good afternoon everyone, I've managed to write a script that calculates the width and height of an image and properly placed a string of text on the bottom right side of an image for usage with credits/captions. I've managed to get it to generate,…
1
vote
1 answer

vertical text covering content

I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above…
kyc
  • 85
  • 1
  • 12
1
vote
2 answers

My own custom textview which can show text vertically, but something wrong! who can help me

I want to extend a VerticalTextView class , It can make the content show vertical text. example: android:text="Hello" It shows like: H e l l o I try to override the onDraw function. Code below: public class VerText extends TextView { public…
daimajia
  • 967
  • 12
  • 15
0
votes
0 answers

CSS grid and vertical text

I have a css grid of 5 columns and dynamic rows that I build like this:
Velleda
  • 5
  • 3
0
votes
0 answers

Horizontal tabs show as vertical at center of page

I am using Bootstrap 5 in an ASP.NET Core 6 MVC app. I have added these references in my _layout.cshtml:
Dnyati
  • 135
  • 1
  • 11
0
votes
1 answer

Unmerge and Assign Values Only Vertically or Horizontally Openpyxl

Using the answer provided by aka863 here: How to split merged Excel cells with Python? I can unmerge, fill values and copy the styling. My questions is how to make the value assigning/filling process configurable. I want the user to be able to…
levent44
  • 13
  • 4
0
votes
1 answer

Why the vertical TextView taking different spaces -android-

I have a TextView inside CardView. after rotation (-90 or 270), each textView had different space from ImageView The result is like this: (https://i.stack.imgur.com/ad9r1.jpg) XML:
0
votes
1 answer

How to vertically center text when using the :before modifier in CSS?

This is another "how do I vertically center" question in HTML. This one is when using the :before modifier. HTML
vertically center me
CSS .status-yellow { display:…
101010
  • 14,866
  • 30
  • 95
  • 172
0
votes
1 answer

Flutter: How to prevent RotatedBox from automatically expanding text to the right?

I'm trying to create a vertical text using the RotatedBox. The widget works well and the text is rotated accordingly, but when the text is too long it is automatically expanded to the right which is not the behavior I wanted. …
flutter_bee
  • 150
  • 9
0
votes
2 answers

How do I horizontally align vertical text in a table with CSS?

I have some writing-mode: vertical-rl text in a table cell. By default, it gets pushed to the left side of the cell, but I want to center it or push it right. If I were handling horizontal-tb text, I would use text-align: center or vertical-align…
erjiang
  • 44,417
  • 10
  • 64
  • 100
0
votes
1 answer

HTML - Add certain spaces. so each row is equal vertically

I'm not quite sure how to explain it completely, but i'm trying. I'm in the process of making a list of some books and possibly have some categories, but I want the lines and words to stand even, like on the same spot. Here's my code: Number …
TheKingZ
  • 13
  • 4
0
votes
2 answers

How to have exactly same space in rotating text vertically as we have when the text is horizontal

I am trying to get text to display vertically in svg using double rotation. I want to rotate each character zero degree and all the characters aligned vertically.Lets say the original svg is:
0
votes
3 answers

String index out of range error - how do I print this string vertically in java?

I'm trying to print a statement vertically, and then backward vertically with two classes so I can practice multiple skills. However, frustratingly, I cannot get my program to work and keep getting a "string index out of range error". I'm not sure…
ayla s
  • 43
  • 6
0
votes
1 answer

Height of the item view gets reduced when i scroll on Recyclerview in android

I want to show name list.I am using recylerview to show that.For that I've used Vertical TextView as a item view.it works properly.But the problem is when i scroll the recyclerview,the items height gets reduced VerticalTextview class public class…
Sathyan
  • 138
  • 1
  • 10