New post
1

Portrait HTML with XD

Avatar
Lyndon
None
Follow

Here are a couple of things to do when you are designing HTML5 for portrait for publish from BrightAuthor (BA).

 

  1. In your web software (i.e. Dreamweaver) make sure you set your page up for 1080 x 1920 (reverse of landscape 1920x1080)
  2. If you publish this as is the page will not display correctly when output[ut using BA in portrait mode. To get it to display correctly you need to rotate the WHOLE page in Dreamweaver. This will not affect the authoring in Dreamweaver – it will look just the same but when you preview it will rotate – very cool. To get this rotate to happen you need to encapsulate the whole  body into a <div> </div>  region.

 

Step 1: Author page in 90 degree rotation (1080 x 1920)

Step 2: encapsulate all your body content between <div> </div> tags

<body>

<div id="mainbodystuff">

 

…..HTML stuff….

 

</div>

</body>

 

Step 3: In the <style> </style> area add a webkit 90 degree rotation

 

<style type="text/css">

# mainbodystuff

 

{

                position:absolute;

                width:1920px;

                height:1080px;

                z-index:4;

                -webkit-transform: rotate(90deg);

}

</style>

 

NOTE:  you can use any angle above – i.e. 270, -90, etc. Video will not work!!! You need to also align you div to top  and left “0”

 

Step 4: In BrightAuthor make a new preso and set it to portrait and use the HTML .html file. It should work very well.

Date Votes

4 comments

  • 0
    Avatar
    Thomas S Dorr

    So, my experience today has shown me that with Firmware: 4.4.82 on an XD230 to make both dimensions the smaller dimension and then make the size of the content whatever extra percentage necessary to fill the screen.  Admittedly I'm not doing this on a 16:9 screen on SXGA (1280x1024), but portrait is portrait.

    See here: 

    http://stuaff.southernct.edu/fitness/temp/brightsign270.php

    #brightsign {
    position:absolute;
    width:1024px; /* in theory should be 1280px */
    height:1024px;
    z-index:4;
    -webkit-transform: rotate(270deg);
    }
    #map-canvas {
    height: 125%; /* 1280 is 1.25 times bigger than 1024 */
    }

     

  • 0
    Avatar
    Walter

    In a recent portrait project we started by testing the code supplied by BrightSign above and it did not render correctly.  I provided them with samples and they confirmed that this FAQ would be updated, but it appears that hasn't happened yet.  I sent a reminder to them...  The samples - test.html and test_fixed.html are attached.

     

    To get proper rotation/positioning we added a -webkit-transform-origin css property.  This works correctly on our portrait HTML5 Facebook module, where there are a number of inner objects and they all position properly.

     

    <style type="text/css">
    *{
    margin:0px;
    padding:0px;
    }

    ::-webkit-scrollbar { width: 0px; height: 0px; }

    body{
    }

    #page{
    width: 1920px;
    height: 1080px;
    display:block;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 540px 540px;
    }

    #content{
    width: 1080px;
    height: 1920px;
    background-color: black;
    color: white;
    display: block;
    }

    </style>

     

    Walter @ p-egd

  • 0
    Avatar
    Lyndon

    Walter, the faq has been updated, but I missed this forum post. But, the faq is correct. 

  • 0
    Avatar
    Walter

    Yep, looks like there was a forum post as well as a FAQ with the same info.  Thanks for the update!

Please sign in to leave a comment.