how to display label text vertically

Question

5.00/5 (1 vote)

See more:

Hi All,

I've a label(label1)and its Text="Joy".I have used Css code for different browser as shown below.

<script type="text/css">
writing-mode:tb-rl;//for IE and displaying the text like J but i need it like y
o o
y J

-webkit-transform: rotate(-90deg); //for safari working fine.
-moz-transform: rotate(-90deg);//for firfox working fine.
</script>
i'm facing the problem with the IE.So please suggest some solutions with examples.

Posted 10-Jun-11 2:55am

ks ravi

Add a Solution

Comments

parmar_punit 11-Jun-11 1:09am

hi ks ravi
you have commneted on my solution that it is working fine, then i dont know why it is down voted?

2 solutions

Solution 1

Add
tag between each character...

OR

C#

.vertical
{
    writing-mode: tb-rl;
    filter: flipH flipV;
}

XML

Here is the complete code.

<html>
<head>
    <title>Vertical text</title>
    <style>
        .vertical
        {
            writing-mode: tb-rl;
            filter: flipH flipV;
        }

    </style>
</head>
<body>
<div class="vertical">Test-1</div>
</body>
</html>

In the case of ASP.Net, you can give it like this.

In the document properties, you define the external css file. Then modify the label tag like this.

<asp:label id="abc" class="vertical" ........</asp:label>

Posted 10-Jun-11 3:02am

parmar_punit

Updated 10-Jun-11 3:03am

v2

Comments

ks ravi 10-Jun-11 9:08am

thanks for reply.I've used and its working fine.

Sergey Alexandrovich Kryukov 10-Jun-11 19:17pm

No, not on many browsers (only IE? -- pretty much useless).
--SA

parmar_punit 11-Jun-11 1:07am

First read the question fully...
ks ravi facing problem with IE only and he knows about other browser so i just sugget for only IE.
dear --SA I think, it is not useless.

Sergey Alexandrovich Kryukov 12-Jun-11 22:30pm

I think I read it, now read again...
You see, I tested it and found not working on Seamonkey (so it won't work on Firefox). If it's not working of Firefox -- already pretty much useless. Here is what I mean. Also, we already have a better solution by thatraja I recommend.
--SA

LakshmiNarayana Nalluri 10-Jun-11 9:13am

it's very nice

Sergey Alexandrovich Kryukov 10-Jun-11 19:18pm

No, see my comment. Use solution by thatraja!
--SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

thatraja · Accepted Answer · 2011-06-10T06:11:00

Solution 2

<html>
<head>
<title>Text Vertical</title>
<style type="text/css">
.txtVertical 
{
	filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  /* IE6,IE7 */
	ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
	-moz-transform: rotate(-90deg);  /* FF3.5+ */
	-o-transform: rotate(-90deg);  /* Opera 10.5 */
	-webkit-transform: rotate(-90deg);  /* Safari 3.1+, Chrome */
	position: absolute; 
}
</style>
</head>
<body>
<div class="txtVertical">Test message</div>
</body>
</html>

Free attachment
Making Text Upside down using CSS[^]

Let me know & give me feedback.

Posted 10-Jun-11 6:11am

thatraja

Comments

NandaKumer 10-Jun-11 13:29pm

nice one

Sergey Alexandrovich Kryukov 10-Jun-11 19:14pm

Agree, a 5.
--SA

Sergey Alexandrovich Kryukov 10-Jun-11 19:18pm

Recommended to accept as the solution.
(The other answer is not recommended -- incompatible!)
--SA

thatraja 11-Jun-11 1:12am

Thanks SA. Always I prefer cross-browser solutions.

Sergey Alexandrovich Kryukov 12-Jun-11 22:31pm

...If possible of course. I impossible, I would prefer simpler solution where difference is not critical.
--SA

parmar_punit 11-Jun-11 1:09am

very nice, My 5