How to display HTML 5 in portrait mode in BrightAuthor:connected and BrightAuthor.

Here are a couple of things to do when you are designing HTML 5 for portrait mode in BrightAuthor:connected or BrightAuthor:

  1. In your web-authoring software (i.e. Dreamweaver), make sure you set your page up for 1080 x 1920 (the reverse of landscape 1920x1080)
  2. 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


<div id="mainbodystuff">


…..HTML stuff….





Step 3: Within the <style> </style> tags, add a WebKit 90 degree rotation call.

<style type="text/css">








                -webkit-transform: rotate(90deg);

                -webkit-transform-origin: 540px 540px;




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

Have more questions? Submit a request


Please sign in to leave a comment.
Can't find what you're looking for? Try to
Powered by Zendesk