?
Solved

how to display text vertical inside div tag with css in HTML

Posted on 2013-05-16
8
Medium Priority
?
591 Views
Last Modified: 2013-05-23
Display Text vertically in HTML div tag
I have a div tag which contains text and I want to display the contents of this div vertically.
0
Comment
Question by:sam_net
  • 3
  • 3
  • 2
8 Comments
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 39171128
Hi,

Have a look at this fiddle:
fiddle

Giannis
0
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 39171173
Hi,

This is a nicer example:
http://jsfiddle.net/9Ube2/3/

Giannis
0
 
LVL 16

Expert Comment

by:Rose Babu
ID: 39171196
try like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Vertical Text Test</title>
    <style type="text/css">
        h1 span
        {
            display: block;
        }
    </style>
</head>
<body>
    <h1>
        y-axis
    </h1>

    <script type="text/javascript">
        var h1 = document.getElementsByTagName('h1')[0];
        h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
    </script>

</body>
</html>

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 

Author Comment

by:sam_net
ID: 39172085
Thanks for your inputs...
Actually it was displayed from top to bottom
T
e
s
t

But i need to display  from bottom to top
t
e
s
T
0
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 39173012
Hi,

Look at this fiddle:
http://jsfiddle.net/9Ube2/4/

Giannis
0
 
LVL 16

Expert Comment

by:Rose Babu
ID: 39173949
Try this updated script.

<script type="text/javascript">
	var h1 = document.getElementsByTagName('h1')[0];
	//h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
	var verSplitStr = h1.innerHTML.replace(/^\s+/, '').replace(/\s+$/, '').split("");
	var verStr = "";

	for (var i = verSplitStr.length-1; i >= 0; i--) {
		verStr = verStr + "<span>" + verSplitStr[i] + "</span>";
	}
	h1.innerHTML = verStr;

</script>

Open in new window

0
 

Accepted Solution

by:
sam_net earned 0 total points
ID: 39177254
After using below css code , its was working fine...


    .clsHorizLR { -ms-writing-mode:lr-tb }
    .clsHorizRL { -ms-writing-mode:rl-tb }
    .clsVertTB  { -ms-writing-mode:tb-rl }
    .clsVertBT  { -ms-writing-mode:bt-rl }
0
 

Author Closing Comment

by:sam_net
ID: 39190262
This issus was solved..
0

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

568 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question