Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-05-16
8
Medium Priority
?
586 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

885 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