[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1193
  • Last Modified:

Vertical text in ASP.Net 4/VB.Net

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
Cluskitt
Asked:
Cluskitt
  • 20
  • 8
  • 6
  • +4
1 Solution
 
asp_net2Commented:
Is the text that you want to be vertical dynamic or static text?
0
 
Manoj PatilSr. Software EngineerCommented:
0
 
CluskittAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Ajay SharmaCommented:
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
 
CluskittAuthor Commented:
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
 
asp_net2Commented:
http://msdn.microsoft.com/en-us/library/ms531187.aspx

<asp:Label style="layout-flow: vertical-ideographic;" ...>Vertical</asp:Label>
0
 
CluskittAuthor Commented:
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
 
CluskittAuthor Commented:
BTW, it should be also noted that writing-mode doesn't work for Firefox, even rotating clockwise (which works on IE).
0
 
asp_net2Commented:
Can I see your code that you currently have in which you are trying to rotate the text?
0
 
CluskittAuthor Commented:
<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
 
Manoj PatilSr. Software EngineerCommented:
0
 
CluskittAuthor Commented:
That is much like the other link you gave me, except that it rotates in the wrong direction :P
0
 
Manoj PatilSr. Software EngineerCommented:
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
 
Manoj PatilSr. Software EngineerCommented:
0
 
Manoj PatilSr. Software EngineerCommented:
Hi, I found some stuff may be finally help you

http://devcity.net/PrintArticle.aspx?ArticleID=145
0
 
CluskittAuthor Commented:
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
 
Daniel Van Der WerkenIndependent ConsultantCommented:
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
 
Daniel Van Der WerkenIndependent ConsultantCommented:
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
 
CodeCruiserCommented:
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
 
CluskittAuthor Commented:
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
 
CodeCruiserCommented:
Welcome to web programming :-)
0
 
CluskittAuthor Commented:
@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
 
CluskittAuthor Commented:
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
 
CluskittAuthor Commented:
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
 
sybeCommented:
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
 
CluskittAuthor Commented:
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
 
sybeCommented:
Source code is not going to be very helpful here. Please post the HTML source as received in your browser.
0
 
CluskittAuthor Commented:
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
 
CluskittAuthor Commented:
Something weird happened. Anyway, here are the files:
0
 
sybeCommented:
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
 
CluskittAuthor Commented:
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
 
sybeCommented:
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
 
CluskittAuthor Commented:
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
 
sybeCommented:
In FireFox you can do "CTRL-A" on the page and then "View Selection Source"
0
 
CluskittAuthor Commented:
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
 
sybeCommented:
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
 
CluskittAuthor Commented:
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
 
CluskittAuthor Commented:
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
 
sybeCommented:
Sorry, no. I don't know. Currently I have no IE9 around to try things out.
0
 
CluskittAuthor Commented:
Ok, we'll figure it out somehow... thanks for your help once again!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 20
  • 8
  • 6
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now