Development Vertical text CSS

Discussion in 'Software' started by Dad, 16 Sep 2004.

  1. Dad

    Dad You talkin to me?

    Joined:
    15 Apr 2003
    Posts:
    5,375
    Likes Received:
    8
    Okay, I know how I can use CSS to create vertical text, but this only works for IE. Does anyone know a way to do this which will work with Mozilla? I can't use graphics as this is for a dynamically created data grid and it all needs to be cross-browser..

    This works with IE, but NOT Mozilla:
    Code:
    .vertText {
         writing-mode: tb-rl;
         filter: flipv fliph;
    }
     
  2. Hwulex

    Hwulex What's a Dremel?

    Joined:
    1 Feb 2002
    Posts:
    4,007
    Likes Received:
    1
    Not sure on CSS, but I know you can do it in JS as well. Not got code to hand, it's at work so can't check cross-browser-abilitititity.
     
  3. NiHiLiST

    NiHiLiST New-born car whore

    Joined:
    18 Aug 2001
    Posts:
    3,987
    Likes Received:
    6
    It works in IE because that's an IE specific filter and not part of the CSS specification. There might be some cross-browser JS or something, but not CSS :(
     
  4. webchimp

    webchimp What's a Dremel?

    Joined:
    9 Oct 2002
    Posts:
    504
    Likes Received:
    1
    Why not just write the text

    D
    O
    W
    N

    the page instead of actually rotating it, that woud be easy enough:

    D<br>O<br>W<br>N
     
  5. Dad

    Dad You talkin to me?

    Joined:
    15 Apr 2003
    Posts:
    5,375
    Likes Received:
    8
    I can't do it like that. Each row and column will be created on-the-fly from an sql database which will be updated at least twice a week. There will be up to 50 columns and up to 60 rows of data.
     
  6. webchimp

    webchimp What's a Dremel?

    Joined:
    9 Oct 2002
    Posts:
    504
    Likes Received:
    1
    There's no reason why you couldn't do this "dynamically".

    Here's a test page:
    Code:
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
    <%
    Function funcDownText(strText)
    	strDown = ""
    	For i = 1 to Len(strText)
    		strLetter = Mid(strText,i,1)
    		strDown = strDown & strLetter & "<br>"
    	Next
    	funcDownText = strDown
    End Function
    %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="176" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="70">&nbsp;</td>
        <td width="27"><div align="center"><strong><%= funcDownText("COLUMN 1") %></strong></div></td>
        <td width="27"><div align="center"><strong><%= funcDownText("COLUMN 2") %></strong></div></td>
        <td width="27"><div align="center"><strong><%= funcDownText("COLUMN 3") %></strong></div></td>
      </tr>
      <tr>
        <td><strong>ROW 1 </strong></td>
        <td>Foo</td>
        <td>Foo</td>
        <td>Foo</td>
      </tr>
      <tr>
        <td><strong>ROW2 </strong></td>
        <td>Foo</td>
        <td>Foo</td>
        <td>Foo</td>
      </tr>
    </table>
    </body>
    </html>
    Obviously the text "ROW 1", "COLUMN1", "Foo" etc. could be retrieved from a database. Just use the function "funcDownText" for anything you want written downwards, for example:

    <%= funcDownText("rsName.Collect("FieldName")) %>
     
  7. Dad

    Dad You talkin to me?

    Joined:
    15 Apr 2003
    Posts:
    5,375
    Likes Received:
    8
    Hmm... Gonna have to try that. It's good to have another set of eyes looking at the problem ;)
     
  8. Hepath

    Hepath Minimodder

    Joined:
    20 Oct 2003
    Posts:
    730
    Likes Received:
    0
    webchimp has hit on something here - here's my take of his idea....

    Use a SQL stored procedure to return a result set in which each column is the word split in letters. Ie you wan't "Dog" "Cat" and "Parrot" returned then the result set will be:

    D C P
    O A A
    G T R
    x x R
    x x R
    x x O
    x x T

    Where x is "NULL"


    Its basically a PIVOTED Table and can be done in SQL using WHEN clauses on the column. If you're using MS SQL2000 you can use table variables (or temp tables in previous versions) ASP can then just process the returned result set normally.

    Depending onthe volatility and method of updating the data you can mark the data as 'constructed' and only recreating this table when you 'really' have to so you only have to build it on the first hit.

    The only problem I see with webchimps is that the data isn't cached and you're recreating a page all the time ....as your data changes twice a week it really pretty static - so personally I'd keep the data formatted in the database rather than doing it only the fly and get the update routine to recreate the data for the display.

    *AFTERTHOUGHT*
    If you do have SQL2000 you could write a normal extraction SQL comand, but amend the data to break up the work with "<BR/>" tags via a SQL function ....

    Please excuse the ramblings of a madman - I've just come home from a 48hr LAN party!

    Stu
     
  9. webchimp

    webchimp What's a Dremel?

    Joined:
    9 Oct 2002
    Posts:
    504
    Likes Received:
    1
    You are correct, the function to create "downwards" text would be called several times every time the page is viewed. An easy solution to this would be to perform the function prior to storing the data in the database, for example:

    Function funcDownText(strText)
    strDown = ""
    For i = 1 to Len(strText)
    strLetter = Mid(strText,i,1)
    strDown = strDown & strLetter & "<br>"
    Next
    funcDownText = strDown
    End Function
    ....
    strSomeField = funcDownText(Request.Form("txtFieldName"))
    ....
    INSERT INTO TableName(FieldName) VALUES(strSomeField)


    So, in the DB field you store:
    S<br>O<br>M<br>E<br> <br>T<br>E<br>X<br>T<br>

    This way the function is only used when you insert or update a record and not every time the page is viewed.

    To display the text correctly in a text field for updating, simply remove the "<br>" tags from the string, for example:

    <input type="text" name="Whatever" value="<%= Replace(rsName.Collect("FieldName"), "<br>", "") %>">

    If you are updating your data very infrequently you could use FSO to dynamically generate static HTML pages for you, that way there is no load at all on the DB when the data is viewed. The DB is only accessed when inserting, updating or deleting records and when the HTML page generation function is run. :D
     

Share This Page