(CLOSED) Vertical Column Titles (ALL browsers)

August 27, 2013, 01:27 PM

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,

August 27, 2013, 02:51 PM

Francis Mariani

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,

August 27, 2013, 03:24 PM

Francis Mariani

MS IE

Google Chrome

Apple Safari

Mozilla Firefox

August 27, 2013, 03:28 PM

mpbMDE

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.

August 27, 2013, 03:35 PM

Francis Mariani

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

August 27, 2013, 04:14 PM

Francis Mariani

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

August 27, 2013, 04:21 PM

mpbMDE

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

August 27, 2013, 06:17 PM

Francis Mariani

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

August 28, 2013, 10:26 AM

Francis Mariani

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.

November 14, 2013, 10:41 AM

mpbMDE

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