Solved

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

Posted on 2013-05-16
8
552 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

765 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