Skip to main content

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease.


Right to Left Vertical Text

Right to Left

Vertical Text


HTML
<div class="v-rl">
  <p>Right to Left</p>
  <p>Vertical Text</p>
</div>
CSS
.v-rl {
writing-mode: vertical-rl;
}

Left to Right Vertical Text

Left to Right

Vertical Text


HTML
<div class="v-lr">
  <p>Left to Right</p>
  <p>Vertical Text</p>
</div>
CSS
.v-lr {
writing-mode: vertical-lr;
}

All Characters Upright

All Characters

Upright

Ultraman ウルトラマン


HTML
<div class="t-upright">
  <p>All Characters</p>
  <p>Upright</p>
  <p>Ultraman ウルトラマン</p>
</div>
CSS
.t-upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

All Characters Sideways

All Characters

Sideways

Ultraman ウルトラマン


HTML
<div class="t-sideways">
  <p>All Characters</p>
  <p>Sideways</p>
  <p>Ultraman ウルトラマン</p>
</div>
CSS
.t-sideways {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

All Characters Mixed

All Characters

Mixed

Ultraman ウルトラマン


HTML
<div class="t-mixed">
  <p>All Characters</p>
  <p>Mixed</p>
  <p>Ultraman ウルトラマン</p>
</div>
CSS
.t-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Comments

Popular posts from this blog

Text Field in Webflow with Material Design Style

Custom Material Design text inputs, using a combination of native Webflow components and some simple HTML and CSS. You can clone the project here , thanks to Steven Hanley. Spent yesterday evening spinning up some @materialdesign text fields using a combination of the @webflow Designer and some simple HTML and CSS. Feel free to clone the project, customize to your liking, and use this component in your next design! ↳ https://t.co/Ti5fVj5V8t pic.twitter.com/KUi1uwW7X1 — steven hanley (@_stevenhanley) December 4, 2019

Introduction

Hello world,  UIUX Component  is for those who newbie in HTML, CSS and JavaScript for their new career as Web Designer, Web Developer, Web Editor etc. We try our best to make sure we update the code which applicable for your daily routine in web development or maybe some for Apps content.  To utilise this site you should have basic knowledge on HTML, CSS and JavaScript. If you still not sure what we talking about, we have a few suggestion on where you should to start your knowledge. What is HTML HTML stands for Hyper Text Markup Language, the standard markup language for creating Web pages. Describes the structure of a Web page, consists of a series of elements which elements tell the browser how to display the content also elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Tutorial What is CSS CSS stands for Cascading Style Sheets, describes how HTML elements are to be displayed on screen, pape...

Image Text Wrap-Around - CSS

Text wrap around the image with shape-outside for visual flair! DEMO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at ullamcorper mi imperdiet. Phasellus sit amet rutrum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at u...