473,898 Members | 2,050 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

solution to display text rotated 90 vertically in firefox css

2 New Member
I have been searching for hours to find a solution to display text rotated at 90 degrees in firefox, and could not find one. css3 and IE has the css command "writing-mode: tb-rl;" but this does not work in firefox. i came to conclusion that SVG is the solution. I have been playing with SVG for few hours now and it is brilliant, you can do graphics and animation like flash but text and javascript based!. anyway check this out, this is one solution to do it in svg and it works.

put this in html document

Expand|Select|Wrap|Line Numbers
  1. <embed class="svgex" src="../thefile.svg" type="image/svg+xml" frameborder="no" width="30" height="60" />
and here is the svg file

Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3. <svg version="1.1"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  4. <script type="text/javascript">
  5. <![CDATA[
  6. //this will create htmljavascriptfunctionname in html document and link it to changeText
  7. top.htmljavascriptfunctionname = changeText;
  8.  
  9. function changeText(txt){
  10.    targetText=document.getElementById("thetext");
  11.    var newText = document.createTextNode(txt);
  12.    targetText.replaceChild(newText,targetText.childNodes[0]);
  13. }
  14. // ]]>
  15. </script>
  16. <text id="thetext" transform="rotate(90,4,4)" font-size="10" x="4" y="4" font-family="Verdana">this text is rotated </text> 
  17.  
  18. </svg>
This idea could be developed further to create the svg object in the html document dom, dynamically with javascript and therefore with no external svj file or an embed object being required. if this woudl be useful to you let me know
Oct 11 '07 #1
5 64265
drhowarddrfine
7,435 Recognized Expert Expert
SVG is great and it should be used everywhere but it only works in modern browsers and not IE6/7.
Oct 11 '07 #2
ClassicalMark
2 New Member
It's been a couple years since this thread was started, so I hope I'm not too late. Please reply if you can.

I can get this to work--sort of. Following the instructions, I get the text line saying "This line is rotated" turned 90 degrees. Terrific. But the CDATA section in the svg document contains a javascript function with a parameter: txt, which to me suggests that I should be able to call that function from within the HTML document (in javascript, of course), include a different line of text as the argument, and have that new text rotated. But I can't get it to work. I can't call the function from the HTML document: I get an "Undefined variable" error. And since the .svg file is embedded, I can't figure out how to address it (ie, with something like embed.document. getElementById( ) or embed.changeTex t(new text). I've tried moving the changeText() function to the HTML document, but again, I can't then get the internal function statements to point to the .svg file.

I'm reasonably competent with HTML and javascript, but I've never worked with .svg before. I read up on it a bit, but the problem doesn't seem to be with .svg per se; it's with linking the .svg file to the HTML document.

This idea could be developed further to create the svg object in the html document dom, dynamically with javascript and therefore with no external svj file or an embed object being required. if this woudl be useful to you let me know
Maybe this is the answer. It sounds like it should be. Has anyone worked out how to do it?

FYI: I'm using Opera 9.64, not Firefox. But since I get the correct rotation of the original line, I can't imagine the problem is with the browser.
Aug 14 '09 #3
AsafAmit
1 New Member
Hi,

At the beginning of the CDATA section, see this assignment:

top.htmljavascr iptfunctionname = changeText;

This "binds" the function changeText (which is in the context of the SVG object), to a function (called htmljavascriptf unctionname which you need to call ) in the containing HTML document.

So in your HTML page, call the function htmljavascriptf unctionname() whenever you want to change the text. e.g.

htmljavascriptf unctionname("my next text");

This works on FF 3.5, I assume it will on Opera.

Hope this helps,
Asaf.
Aug 26 '09 #4
ClassicalMark
2 New Member
Thanks for the tip, AsafAmit. I'll give it a try.

I finally did figure out another way to do it. First move the changeText function to the HTML document. From within that HTML doc, open the .svg doc with javascript, assigning a variable to the window.open statement:

Expand|Select|Wrap|Line Numbers
  1. turnTextPage = window.open( "savedDocument.svg","","params, etc.");
Then add the variable name to the changeText function:

Expand|Select|Wrap|Line Numbers
  1. function changeText( lineID, text ){
  2.     targetText = turnTextPage.document.getElementById( lineID ) ;
  3.     var newText = turnTextPage.document.createTextNode( text ) ;
  4.     targetText.replaceChild( newText, targetText.childNodes[0] );
  5. }
SInce the function is now in the HTML doc, you can call it the normal way, and the text lines will be transferred to the .svg doc.
Aug 27 '09 #5
threecuptea
1 New Member
I tried to replace flash SWF object with sgv object. The followings are my code. The result is as the attached. It's not right.
I am more a server side person (JSF). Not 1 Javascript person Need some instruction to get this work. Thanks[IMG]file:///home/sling/dashboard.png[/IMG]
The image might not work. Basically, it display once out of place (in top of screen. All vertical line with undefined wording.
Expand|Select|Wrap|Line Numbers
  1. <t:dataList id="profileList" var="profile" value="#{Dashboard2Bean.profileList}" rowIndexVar="row">
  2.                     <td rowspan="2">                        
  3.                         <div id="verticalTextDiv">
  4.                          <script type="text/javascript">
  5.                              var output = '<h:outputText value="#{profile.vendorAbbrvName}" /> - <h:outputText value="#{profile.name}" />';
  6.                              document.writeln(displayVerticalText(output));
  7.                         </script>
  8.                         </div>
  9.                     </td>
  10.                 </t:dataList>
  11.  
Nov 11 '09 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

2
9662
by: bob | last post by:
Does anyone know if it is possible to display text vertically in HTML? Basically, I want normal text rotated 90 degrees.
8
4096
by: Harry Haller | last post by:
The right arrow in IE is displayed aligned to the bottom of the line. Is there any way I can display it aligned vertially in the middle? Example: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"><!-- sub {vertical-align: text-bottom; font-size: smaller}
6
61800
by: charsh | last post by:
Hi, I using the code below to draw a text in a pictureBox1. //Start--------------------------------------------------------------- private void button1_Click(object sender, System.EventArgs e) { Graphics g; g = pictureBox1.CreateGraphics(); g.FillRectangle(Brushes.White,0,0,160,160);
3
6780
by: James Radke | last post by:
Hello, How can I make the text of a windows textbox read vertically (i.e. rotated 90 degrees) from bottom to top instead of horizontally? Any samples or ideas would be appreciated! Thanks! Jim
5
12017
by: Ken Hunt | last post by:
I know how to draw text vertically. My problem is the StringFormatFlags.DirectionVertical command rotates the text 90 degrees clockwise. I want it rotated 90 degrees counter-clockwise (I'm making a y-axis label for a chart). How do you do that? Can you do that?? Ken
5
5056
by: Peter Lapic | last post by:
I have to create a image web service that when it receives an imageid parameter it will return a gif image from a file that has been stored on the server. The client will be an asp.net web page that calls the web service to render a vertical strip of images. After doing some research I am unable to find some vb.net code that can assist in what I want to achieve. The closest thing I found was
2
5799
by: Tilo Pätzold | last post by:
Hi Everybody (especially Microsoft), we build EMF files with rotated text for export to office (powerpoint, word). It is planned that the text can be edited in the office document. Without the rotate transformation the text stays as a block and can be edited in the office document after ungrouping. But a rotated text leads to single charackters when ungrouping. The following sample code creates an emf file. The file can be dragged to...
0
2344
by: pamelafluente | last post by:
Hello experts, I need some help to do in a proper way what I am doing. I have some "cells" in a web page. Each "cell" is made of 2 DIV. One is inside the other. Example with 2 "cells" : <div class=c7bg style="top:202px;left:585px;width:55px;height:30px;"> <div class=c7fg style="top:7px;left:2px;"> <table><tr>
22
60880
Atli
by: Atli | last post by:
Hi. I'm setting up a small photo-album-type thing, where I use PHP to set up a list of images for visitors to click through. That's all simple enough. However, I'm having a weird bug in IE8. Because the images can all be of different sizes (nothing I can do about that... outside my control), I use a CSS trick to get them all centered both vertically and horizontally, and scaled down to a proper size. Basically, I put the image tag...
0
9993
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9842
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11265
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10859
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8036
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5882
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6078
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4297
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3308
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.