Romeo
Last Updated: October 8, 2015
Here are a couple of things to do when you are designing HTML5 for portrait for publish from BrightAuthor (BA):
- 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 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. 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, video will not work with these angels. You will also need to align the div to top and left “0”.
Step 4: In BrightAuthor, create a new presentation and set the Monitor orientation to Portrait. Then add your .html file using an HTML state.
Note: Use BrightAuthor 4.3.0.x or later when setting the Monitor orientation to Portrait. Earlier versions of BrightAuthor may cause undesirable scaling in HTML pages when set to portrait mode.
Note: #mainbodystuff shouldn't have any spaces. For example, using "# mainbodystuff" will fail to rotate content.
8 Comments