(CLOSED) Vertical Column Titles (ALL browsers)

Hi,
I've search Focal Point and the web, for that matter. I need to rotate column titles to appear verically (at a 90 degree angle) in HTML. It must work with ALL browsers (IE 8, IE 9 (etc) , Chrome, Safari, and Firefox).
So 'mso-rotate:90;' will not work because that works in ONLY IE.

Can anyone help? I can get it to rotate in IE9 by applying the css class to all titles.

Thanks!
Marilyn

This message has been edited. Last edited by: mpbMDE,

WebFOCUS 8.1.05 Windows 7, all output

Posts: 107 | Registered: February 18, 2011

Francis Mariani

Expert

posted

Hide Post

This is a beginning, tested on IE9, Firefox 23, Safari 5.1 and Google Chrome 29. Rotating the text (actually rotating the td that contains the text) is not pretty. There's extra styling here to try to make things look nice (to my eye). The main problem is that to get the rotation to work properly, the td needs to be square...

SET PAGE=NOPAGE
SET BYDISPLAY=ON

TABLE FILE CAR
SUM
SALES
BY COUNTRY
BY CAR
BY MODEL

ON TABLE HOLD AS H001 FORMAT HTMTABLE

ON TABLE SET STYLE *
TYPE=REPORT, BORDER=OFF, SQUEEZE=ON, $

TYPE=TITLE, CLASS=columnTitle, $
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<!doctype html>

  <head>
    <title>WebFOCUS Report</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style type="text/css">

    body { font-family: Arial, sans-serif; font-size: 9pt; }

    table { border: 2px solid #dedede; }
    td { background-color: #dedede; border: 0; }

    //table { border-collapse: collapse; }

    .columnTitle {
      background-color: #aaaaaa;
      color: white;
      height: 170px;
      width: 170px;
      text-align: left;
      vertical-align: bottom;

      /* for firefox, safari, chrome, etc. */
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);

      /* for ie */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
    </style>
  </head>

  <body>
!IBI.FIL.H001;
  </body>
</html>
-HTMLFORM END

This message has been edited. Last edited by: Francis Mariani,

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

Francis Mariani

Expert

posted

Hide Post

MS IE

Google Chrome

Apple Safari

Mozilla Firefox

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

mpbMDE

Platinum Member

posted

Hide Post

Thank you Francis! The column titles in the report need to be vertical to minimize their width; [ values are 7 digits wide and the column names are lengthy] so the required square title boxes will not work.

WebFOCUS 8.1.05 Windows 7, all output

Posts: 107 | Registered: February 18, 2011

Ignored post by mpbMDE posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Try playing with the css a bit, but unfortunately, it seems like if you have different height and width things get ugly. Give it a try...

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

Francis Mariani

Expert

posted

Hide Post

You could do it the old-fashioned, FOCUS way:

SET PAGE=NOPAGE
SET BYDISPLAY=ON

TABLE FILE CAR
SUM
SALES/D7  AS 'V,E,R,Y,,L,O,N,G,,S,A,L,E,S'
WEIGHT/D7 AS 'V,E,R,Y,,L,O,N,G,,W,E,I,G,H,T'
HEIGHT/D7 AS 'V,E,R,Y,,L,O,N,G,,H,E,I,G,H,T'
LENGTH/D7 AS 'V,E,R,Y,,L,O,N,G,,L,E,N,G,T,H'

BY COUNTRY AS 'C,O,U,N,T,R,Y'

ON TABLE SET STYLE *
TYPE=REPORT, BORDER=OFF, SQUEEZE=ON, $
ENDSTYLE
END
-RUN

There's a limit of how many lines a column title can be (lines delimited by commas) - the documentation states "5 lines", but I managed the above 16 lines...

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

mpbMDE

Platinum Member

posted

Hide Post

Another roadblock: My titles are up to 35 characters long. Rats!

WebFOCUS 8.1.05 Windows 7, all output

Posts: 107 | Registered: February 18, 2011

Ignored post by mpbMDE posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Found an article on the WWW: StackOverflow: Rotate Text as Headers in a table (cross browser) [closed]

Adapted for WebFOCUS:

SET PAGE=NOPAGE
SET BYDISPLAY=ON

TABLE FILE CAR
SUM
SALES/D7  AS ''
WEIGHT/D7 AS ''
HEIGHT/D7 AS ''
LENGTH/D7 AS ''

BY COUNTRY AS ''

ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!doctype html>

  <head>
    <title>WebFOCUS Report</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if IE]>
    <style type="text/css">
      .rotate_text
      {
         writing-mode: tb-rl;
         filter: flipH() flipV();
      }
    </style>
<![endif]-->
<!--[if !IE]><!-->

    <style type="text/css">
      .rotate_text
      {
         -moz-transform:rotate(-90deg);
         -moz-transform-origin: top left;
         -webkit-transform: rotate(-90deg);
         -webkit-transform-origin: top left;
         -o-transform: rotate(-90deg);
         -o-transform-origin:  top left;
          position:relative;
         top:20px;
      }
    </style>
<!--<![endif]-->

    <style type="text/css">
      body { font-family: Arial, sans-serif; font-size: 9pt; }

      table
      {
         border: 1px solid black;
         table-layout: fixed;
         width: 350px; /*Table width must be set or it won't resize the cells */
      }
      th, td
      {
          border: 1px solid black;
          width: 23px;
      }
      .rotated_cell
      {
         height:300px;
         vertical-align:bottom
      }
    </style>

</head>

  <body>
   <table border='1'>
      <thead>
        <tr>
           <td class='rotated_cell'>
              <div class='rotate_text'>Country</div>
           </td>
           <td class='rotated_cell'>
              <span class='rotate_text'>Sales&|nbsp;aaaa&|nbsp;bb&|nbsp;ccccc&|nbsp;ddd&|nbsp;eee&|nbsp;fffffff</span>
           </td>
           <td class='rotated_cell'>
              <div class='rotate_text'>Weight&|nbsp;aa&|nbsp;bbbb&|nbsp;ccccccc&|nbsp;ddddd&|nbsp;eee&|nbsp;ff</div>
           </td>
           <td class='rotated_cell'>
              <div class='rotate_text'>Height&|nbsp;aaa&|nbsp;bb&|nbsp;cccc&|nbsp;dddddddd&|nbsp;eee&|nbsp;fff</div>
           </td>
           <td class='rotated_cell'>
              <div class='rotate_text'>Length&|nbsp;aaaaaaa&|nbsp;bbbbbbb&|nbsp;cc&|nbsp;ddd&|nbsp;ee&|nbsp;ff</div>
           </td>
        </tr>
      </thead>

      <tbody>
!IBI.FIL.H001;
      </tbody>
   </table>
  </body>
</html>
-HTMLFORM END

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Silly me! One tried and tested method for HTML is to use images. This has been mentioned on FocalPoint. I would generate the report without the fancy styling. Then capture a screenshot and create images from crops of each column title, rotating the image 90°. Save them to a folder on the web server. Then modify the WebFOCUS code to something like this:

SUM
WEIGHT AS '<img src="/approot/baseapp/ctitle_weight.png />'

If you can't get this to work, I can try creating sample code for you.

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

mpbMDE

Platinum Member

posted

Hide Post

I am back working on these reports and continue to have an issue....

I have tried solutions above and a few more that I found on Focal Point [Thank you, Francis! I found some things I have used on other project, in the meantime.]

My findings:
HTMLTABLE works in some browsers.
And now the requirement is to produce the report(s) in Exzcel. HTMTABLE will convert to an excel table in Firefox and IE - but not in Chrome and I haven't turned it over to QA for a Safari test.

 
table file blah
blah blah blah
ON TABLE pchold/hold AS RPT9 FORMAT HTMTABLE
ON TABLE SET STYLE *
blah blah blah
ENDSTYLE
END
-RUN
SET HTMLFORMTYPE=XLS
-RUN
-HTMLFORM BEGIN
<STYLE>
.rotate
{
mso-rotate:90;
font-weight: bold;
vertical-align:bottom;
height:175;
border-style:solid;
}
</STYLE>
<BODY>
!IBI.FIL.RPT9;
</BODY>
-HTMLFORM END

Thanks in advance for any wisdom shared!
Marilyn

WebFOCUS 8.1.05 Windows 7, all output

Posts: 107 | Registered: February 18, 2011

Ignored post by mpbMDE posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

(CLOSED) Vertical Column Titles (ALL browsers)

Focal Point | Privacy Statement | Terms of Service