support@brightsign.biz
Here are a couple of things to do when you are designing HTML 5 for portrait mode in BrightAuthor:connected or BrightAuthor:
- In your web-authoring software (i.e. Dreamweaver), make sure you set your page up for 1080 x 1920 (the reverse of landscape 1920x1080)
- If you publish this as is, the page will not display correctly when outputted using BrightAuthor:connected 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. To get this rotate to happen, you need to encapsulate the whole body in a <div> </div> region.
Step 1: Author the 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: Within the <style> </style> tags, add a WebKit 90 degree rotation call.
<style type="text/css">
#mainbodystuff
{
position:absolute;
width:1920px;
height:1080px;
z-index:4;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 540px 540px;
}
</style>
Note: You can use other angles: 270, -90, etc. However, the video will not work with these angels. You will also need to align the div to top and left “0”.
Step 4: In BrightAuthor:connected, create a new presentation and set the Orientation to Portrait. Then add your .html file using an HTML 5 widget.
Note: #mainbodystuff shouldn't have any spaces. For example, using "# mainbodystuff" will fail to rotate content.
0 Comments