Relative Sizing

You can set some or all objects to automatically resize to fit a user’s browser window using the Relative Sizing option – a method which, when combined with Relative Positioning, is referred to as “dynamic layout.” (For more information, see Dynamic Layout.)

When objects are set to use Relative Sizing, the project’s target resolution is factored in to determine the size of objects relative to the edges of the browser window. The effects of Relative Sizing are that if the browser window is minimized or made smaller, geometric shapes and drawings are scaled smaller, images and titles are resized smaller, and text is re-wrapped within its containing text box. The opposite effect is observed when the browser window is maximized or made larger.

If, for example, an object is assigned Relative Horizontal Sizing, it will expand or contract right and left if the browser is resized. Similarly, if an object is assigned Relative Vertical Sizing, it will expand or contract top and bottom if the browser is resized.

When Relative Sizing is not selected, an object will be an absolute size, regardless of the height of the browser window.

Setting an object so that its edges touch the guide border means it will be 100% of the browser window size.

Because the browser is doing the re-sizing resizing may not look good in all cases. A small image made large will look pixilated.

With both vertical and horizontal sizing, aspect ratio becomes an issue.

You can assign Relative Horizontal and/or Vertical Sizing to an object using the Relative Horizontal Sizing and/or Relative Vertical Sizing buttons on the Align Bar. (For more information, see Align Bar.) Or, you can apply Relative Horizontal and/or Vertical Sizing settings globally to all objects in your project on the Project Target Options dialog box. (For more information, see Project Target Options Dialog Box.)

Setting Relative Sizing Attributes

To set relative sizing attributes for a single object:

1. Click to select the object in the Work Window whose sizing attributes you wish to set.
2. To set a relative horizontal sizing for the object, click the Relative Horizontal Sizing button: in the Align Bar

   OR

   To set a relative vertical sizing for the object, click the Relative Vertical Sizing button: in the Align Bar.

   OR

   To set both relative and vertical horizontal sizing for the object, click both the Relative Horizontal Sizing button: and the Relative Vertical Sizing button: .

   The selected object will now resize relative to the size of the browser window.

To set relative sizing attributes for all objects in the project:

By default, all objects are initially set with absolute sizing attributes.

1. Select Options>Project Options.

The Project Target Options dialog box will open. For more information, see Project Target Options Dialog Box.

1. Click the More button to expand the dialog box.
2. To set relative horizontal positioning for all objects, click to checkmark the H Size option box.
3. To set relative vertical positioning for all objects, click to checkmark the V Size option box.
4. Click OK. The dialog box will close, and your sizing settings will be applied to all objects in the project and to new, blank projects.

The setting will not affect existing objects. To apply settings to existing objects in the project click the Apply to all objects button.