Vertical text in ASP.Net 4/VB.Net

Is the text that you want to be vertical dynamic or static text?

Hello Check the following link

http://www.codeproject.com/KB/vb/vertical_label.aspx

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?

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/

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.

http://msdn.microsoft.com/en-us/library/ms531187.aspx

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

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.

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

Can I see your code that you currently have in which you are trying to rotate the text?

<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" />

ok check this

http://www.java2s.com/Code/VB/2D/DrawStringDirectionVertical.htm

That is much like the other link you gave me, except that it rotates in the wrong direction :P

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

just refer this

http://msdn.microsoft.com/en-us/library/332kzs7c%28v=vs.71%29.aspx#Y626

just refer this

http://msdn.microsoft.com/en-us/library/332kzs7c%28v=vs.71%29.aspx#Y626

http://www.codeproject.com/KB/miscctrl/Vertical_Label_Control.aspx

Hi, I found some stuff may be finally help you

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

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).

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.

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>

Select allOpen in new window

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 :-)

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.

Welcome to web programming :-)

@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.

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.

http://snook.ca/archives/html_and_css/css-text-rotation

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.

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.

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

Source code is not going to be very helpful here. Please post the HTML source as received in your browser.

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.

Something weird happened. Anyway, here are the files:

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.

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.

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.

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.

In FireFox you can do "CTRL-A" on the page and then "View Selection Source"

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

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 :)

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?

Sorry, no. I don't know. Currently I have no IE9 around to try things out.

Ok, we'll figure it out somehow... thanks for your help once again!