Solved

Vertical text in ASP.Net 4/VB.Net

Posted on 2011-09-08
44
1,060 Views
Last Modified: 2012-05-12
We have a web site with ASP.Net 4 and VB.Net. In some parts of some pages, we want the text to be vertical, from bottom to top, left to right. We've tried many different options on the net, including writing-mode (which only rotates 90º clockwise), transform, etc. None seem to work right. I haven't found any solution other than CSS and none that works for both Firefox AND IE. It seems stupid that there isn't a simple solution to this (one would think) simple and common enough situation.
Any solution is fine (CSS for a div region, label server control, etc), as long as the text is rotated 90º counter-clockwise
Can anyone help, please?
0
Comment
Question by:Cluskitt
  • 20
  • 8
  • 6
  • +4
44 Comments
 
LVL 4

Expert Comment

by:asp_net2
ID: 36502490
Is the text that you want to be vertical dynamic or static text?
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 36502523
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36502560
In some pages it's static, others it's dynamic. In some places, even the table where the text is being written is dynamic.

techChallenger1, I had glanced once at that page, but I would prefer if I didn't have to go about creating controls of my own. It seems to me that there has to be some simple solutions already built-in to achieve this. After all, vertical text on a label, table cell, etc, can't be all that uncommon, right? Even excel and word have options for this. VBA has a property for this. Why doesn't VB.Net?
0
 
LVL 18

Expert Comment

by:Ajay Sharma
ID: 36502613
Declare the label as
<asp:Label id=”lblTotate” style=”writing-mode:tb-rl” runat=”server”>your text here</asp:Label>

For more info visit:
http://dotnetcoderoom.wordpress.com/2008/08/05/rotate-a-label-text/
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36502627
Well, we've tried that. As I said on the post, that rotates the text clockwise. We need it to rotate counter-clockwise. Basically, style=”writing-mode:bt-lr”. But that doesn't work.
0
 
LVL 4

Expert Comment

by:asp_net2
ID: 36502648
http://msdn.microsoft.com/en-us/library/ms531187.aspx

<asp:Label style="layout-flow: vertical-ideographic;" ...>Vertical</asp:Label>
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36502693
That also rotates clockwise. I need the text to start writing at the bottom to the top. If there are more lines, they will be placed to the right. So far, all results are starting at the top and more lines placed to the left.
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36502748
BTW, it should be also noted that writing-mode doesn't work for Firefox, even rotating clockwise (which works on IE).
0
 
LVL 4

Expert Comment

by:asp_net2
ID: 36502754
Can I see your code that you currently have in which you are trying to rotate the text?
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36502774
<asp:Label ID="ActionStatus" Text="VerticalText" runat="server" Font-Bold="True" Font-Names="Arial"
        Font-Size="Large" ForeColor="Red" Width="790px" Style="writing-mode: tb-rl" />
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 36502809
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36502899
That is much like the other link you gave me, except that it rotates in the wrong direction :P
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 36502937
Is this works for you ??


For Vertical Centre alignment:


Label1.Top = Text1.Top + ( (Text1.Height - Label1.Height) / 2)


For Vertical Bottom alignment:


Label1.Top = Text1.Top + Text1.Height - Label1.Height
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 36502958
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 36502972
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 36503006
Hi, I found some stuff may be finally help you

http://devcity.net/PrintArticle.aspx?ArticleID=145
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36503071
Well, first of all, some of those are for VB Applications, not for VB/Asp.Net Web sites.
Also, almost all are rotating clockwise (which is already done with writing-mode).
0
 
LVL 19

Expert Comment

by:Daniel Van Der Werken
ID: 36503407
There appears to be a CSS3 mechanism for this but I can't find one for CSS 2 that works.  Here is a reference to the CSS 3 version, but I am using IE 8 and can't see the results.  Maybe in IE 9?  Probably Firefox 4.0 or later will work too.

http://www.w3.org/TR/css3-writing-modes/#text-orientation

deways-left

    In vertical writing modes, this causes text to be set as if in a horizontal layout (using horizontal glyph variants and metrics), but rotated 90° counter-clockwise. This value puts the element in a horizontal typographic mode.

    If set on a non-replaced inline whose parent is not ‘sideways-left’, this forces bidi isolation: the ‘normal’ and ‘embed’ values of ‘unicode-bidi’ compute to ‘isolate’, and ‘bidi-override’ computes to ‘bidi-override isolate’. Layout of text is exactly as for ‘sideways-right’ except that the text content and baseline table of each of the element's inline boxes is mirrored around a vertical axis along the center of its content box. The positions of text decorations propagated from an ancestor inline (including the block container's root inline) are not mirrored, but any text decorations introduced by the element are positioned using the mirrored baseline table.

    Similarly, if an inline child of the element has a ‘text-orientation’ value other than ‘sideways-left’, an analogous transformation (and bidi isolation) is applied.

Also, make sure you're using a UNICODE character set:  
Reference here:  http://www.i18nguy.com/markup/right-to-left.html
Use character encodings that employ logical not visual ordering, such as Unicode, Windows-1255, Windows-1256, ISO-8859-6-i, ISO 8859-8-i.

What I tried to do, and what might work for you if you fiddle with it, but this is very hacky, is rotate in a 90 degree clockwise rotation but also change the text from left-to-right to right-to left.

Here is an example that works -- sort off -- my text is "upside down" now:

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-6-i" />
      <title>RTL Up Down Example</title>
   </head>
   <body>
      <form>
         <div style="writing-mode: tb-rl;">
         <bdo dir="rtl" style="white-space: no-wrap;">ThisIsSomeVerticalText</bdo>
         </div>
        </form>
   </body>
</html>

So, the final mechanism, which might or might-not work would be to do this and then make the text itself upside down.  I am not going to do that but there are some Javascripts that can do this for you.

http://www.revfad.com/flip.html

Putting this all together, you might be able to do what you want.  There might be a much simpler way, though.  I don't know.
0
 
LVL 19

Expert Comment

by:Daniel Van Der Werken
ID: 36503901
Heh.  I had some extra time so I implemented a solution that "works".  Hah

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>RTL Up Down Example</title>
	  <link rel="stylesheet" type="text/css" href="xhtml.css" />
	  <script type="text/javascript" src="jquery.js"></script>
	  <script type="text/javascript">
	     $( 'document' ).ready( function() {
	        var textToFlip = $('#UpText').text();
            var result = flipString( textToFlip );
            $('#UpText').text( result );
         });
	  </script>
<script>

function flipString(aString) {

 var last = aString.length - 1;
 //Thanks to Brook Monroe for the suggestion to use Array.join
 var result = new Array(aString.length)
 for (var i = 0; i < aString.length; i++) {
  var c = aString.charAt(i)
  var r = flipTable[c]
  result[i] = r ? r : c
 }
 return result.join('')
}

var flipTable = {
a : '\u0250',
b : 'q',
c : '\u0254', //open o -- from pne
d : 'p',
e : '\u01DD',
f : '\u025F', //from pne
g : '\u0183',
h : '\u0265',
i : '\u0131', //from pne
j : '\u027E',
k : '\u029E',
//l : '\u0283',
m : '\u026F',
n : 'u',
r : '\u0279',
t : '\u0287',
v : '\u028C',
w : '\u028D',
y : '\u028E',
'.' : '\u02D9',
'[' : ']',
'(' : ')',
'{' : '}',
'?' : '\u00BF', //from pne
'!' : '\u00A1',
"\'" : ',',
'<' : '>',
'_' : '\u203E',
'\u203F' : '\u2040',
'\u2045' : '\u2046',
'\u2234' : '\u2235',
'\r' : '\n' //thank you, Yeeliberto
}

for (i in flipTable) {
  flipTable[flipTable[i]] = i
}
</script>
   </head>
   <body>
      <form name="UpForm">
         <div style="writing-mode: tb-rl;">
         <bdo id="UpText" name="UpText" dir="rtl" style="white-space: no-wrap;">
            thisissomeverticaltext
         </bdo>
         </div>
	  </form>
   </body>
</html>

Open in new window

0
 
LVL 83

Expert Comment

by:CodeCruiser
ID: 36506208
Cluskitt:
BTW, it should be also noted that writing-mode doesn't work for Firefox, even rotating clockwise (which works on IE).


And then you ask why there isn't something in VB.NET to achieve this :-)
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36508760
It does seem stupid that simple CSS (not even talking about ASP or VB here) would work differently for Firefox and IE. It seems to me that they do it for the single purpose of being different, seeing as CSS (like xhtml, xml, etc) has a defined standard.
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 83

Expert Comment

by:CodeCruiser
ID: 36513336
Welcome to web programming :-)
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 36530189
@Dan7el: I have looked into your code, but I can't say I really understood how it works, how I can use it on static content (like a textbox, label, cell, etc) and especially how I can use it on dynamic content (controls created from code behind).

@CodeCruiser: I have always hated web programming exactly because of that. Things don't behave like you expect them to, it's hard to program variables that are REALLY global (especially with browsers now keeping sessions after closing), there's a huge amount of added layers that only confuse things. However, I would expect that most functionalities would be easy to use for IE. After all, ASP.Net, VB:Net and IE are all from Microsoft. If they don't synergize, what's the point?
Right now, our desire is to get the application similar to IE, Firefox and Chrome. But if there are differences, IE is the priority. However, this is hard even just for IE. It leads me to think that there mustn't be much demand for this feature.
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37337959
Still no luck getting this to work. I've tried most of the solutions here and they're either rotating clockwise, they're VB applications instead of web, or they simply don't work (like "text-orientation" css property).
It would be nice to get this to work properly. It hasn't been an urgent issue so far (which is why it took so long to reactivate the question) but it's getting to be annoying now.
On the other hand, it's possible that, in the near future, we move all printing jobs through crystal reports (to export to pdf, among other things), which would make this even less urgent (just for visualization).
I'm going to get an attention request and see if new ideas appear. If no working solution comes up till new year's, I'm going to delete this question.
0
 
LVL 28

Expert Comment

by:sybe
ID: 37345311
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37345807
The only new thing in that was the filter tag. The transform tags were already tried before. The one for firefox works but it screws up the layout completely. The one for IE doesn't work, neither does the filter. At least in IE8.
0
 
LVL 28

Expert Comment

by:sybe
ID: 37349233
The solution is in CSS, and the question is best off in the CSS zone.

> The one for firefox works but it screws up the layout completely

It should not. CSS is not always easy. To really help you, we need to look over your shoulder. Publish your page somewhere where we can see it. "screwing up the layout completely" is not a thing that can be repaired blind.

> neither does the filter. At least in IE8.

It should work. Sounds like you did not apply it correctly. But again, there is no way to be helpful without seeing things ourselves.


0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37349263
I can't put the page publicly, especially because the page can only be accessed with authentication. But I can post here both the css and the aspx. The CSS isn't probably too efficient so far, mostly being handled by Visual Studio, but we'll work on that later.
Also, this is the version we're working with now. This works for IE and not for Firefox. I tried replacing them with the ones supplied by the link you posted, but nothing worked.
Any help would be greatly appreciated.
Site.css
Site.master
Planificacao.aspx
0
 
LVL 28

Expert Comment

by:sybe
ID: 37349273
Source code is not going to be very helpful here. Please post the HTML source as received in your browser.
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37349307
Ok, I'm sending 3 versions:
1 is as it's working now, with "writing-mode: tb-lr"
2 is with "-webkit-transform: rotate(-90deg);" and "-moz-transform: rotate(-90deg);"
3 is with "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);" and "-moz-transform: rotate(-90deg);"

1 only works with IE (though in IE9 it kinda centers two values (11:30 and 17:00))
2 and 3 only work with FF, but with the layout not adjusting for height, which it does in IE with first option.
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37349318
Something weird happened. Anyway, here are the files:
0
 
LVL 28

Expert Comment

by:sybe
ID: 37349349
I see no html-elements with class="orienta", so I do not know which element you want to have vertical text.

I do see this element:
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'MainMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>

Looks at this does something with orientation, but the javascript code is not present.

Also there is a stylesheet with url "/WebSite5/WebResource.axd?d=cXJysKbg9cd4wxVFYUdcQhQBewcT68P42RrSHJkVwb73v8tu_j8WqRmef1VNFFtJlPIPTsQmw0E5SyuJqBxFqHMms5XJ3eq2VOm8ZaUAPSa1MKuIY403ioweR5bqMertbcvcYKpSYrXl5FHj7cWYxA2&amp;t=634404574920000000", which is not posted.

> only works with IE (though in IE9 it kinda centers two values (11:30 and 17:00))

There is not "11:30" or "17:00" in the htm source.

0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37349393
All the controls are inside a repeater. They come from a query. The class "orienta" is applied to labels in the itemtemplate part of the repeater. The values 11:30 and 17:00 (as well as the rest of the 24 hours with a 30min interval) come from the sql query. When I saved that source code, the whole repeater was loaded and had the values which I told you about. Also, the labels from the repeater do have vertical text, either in IE or FF.
0
 
LVL 28

Expert Comment

by:sybe
ID: 37349452
Check for yourself. Save the stuff you posted to a new directory and open it in your browser. It is probably not what you expect it to be.
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37349518
It seems that the browsers don't save the repeaters as source.
The whole page is inside an updatepanel, in case that makes any difference.
Anyway, how do you want to proceed? I don't know how to provide you with the required code if the browser displays it but doesn't save it to html.
0
 
LVL 28

Expert Comment

by:sybe
ID: 37349528
In FireFox you can do "CTRL-A" on the page and then "View Selection Source"
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37349558
Ok, I'm sending the files for FF again. Just 1 and 3 (2 and 3 return the same with FF). If you can figure out what's going on with just these great, but if you need IE pages for that, I don't know how to send you those, but I'm open to suggestions. Planificacao-1-FF.html Planificacao-3-FF.html
0
 
LVL 28

Accepted Solution

by:
sybe earned 500 total points
ID: 37349620
Some quick adaptations on the CSS makes it work in Firefox and IE.

Important is that it should be in a <div>, not in a <span>. A div is much better stylable than a span.
I made it work like a <div> in the css, by setting "display:block;" (a span has "display:inline;")

<style type="text/css">
    .orienta
    {
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      -moz-transform: rotate(-90deg);
      display: block;
      position:relative;
      top:10px;
      height: 25px;
    }
    .style1
    {
      color: #0000FF;
    }
  </style>

Open in new window

0
 
LVL 18

Author Closing Comment

by:Cluskitt
ID: 37349655
Excellent. This works well for both. You have no idea the time I lost trying to figure out a solution for this. Thanks a lot for your help and have an awesome year :)
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37352034
I have one last question, if you still follow this:
In IE8 and FF it's excellent, but for some reason, IE9 shows the font in bold and just half (11:, 12:, etc). Any idea why?
0
 
LVL 28

Expert Comment

by:sybe
ID: 37353590
Sorry, no. I don't know. Currently I have no IE9 around to try things out.
0
 
LVL 18

Author Comment

by:Cluskitt
ID: 37353887
Ok, we'll figure it out somehow... thanks for your help once again!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now