How can you determine the size and position of visual objects – layout element, button responses?
By default, text layout will appear in the center of the screen, and buttons are organized in a row under it. If you’re OK with that, you don’t need to read this page. If you’re not, read on.
Your experiment will eventually run as an HTML web page, so to understand how you control the appearance of objects, you need to understand the basics of how HTML places visual elements on the screen. There are 3 key points to understand here:
1. The HTML positioning system treats the visual objects as rectangles.
A response button has a rectangular shape. A text layout element does not, but it has a virtual rectangular bounding box. You define the size of the button, or that of the text’s bounding box, via the height and width parameters (see below). Note that for text objects, there are two parameters to control the size of its bounding box (height, width), and a separate parameter to control the actual size of the font (format:font-size).
2. The position of each object is determined relative to a reference point.
There are few possible such reference points that you can use, and you set the reference point via the position parameter:
- position (optional): Determines the reference point for setting the layout element’s position. “absolute” means that the reference point is the upper left corner of the browser window. “relative” means that the reference point is the center of the window. See more details here.
The object’s position relative to the reference point is set via the top and left parameters, as explained below.
3. Defining distances on screen.
You need to define screen distances for several purposes – to set an object’s position relative to the reference point, to set the object size (= the size of its bounding box), to set the text font size, and more. HTML has several ways to define screen distances. One way is to define the distance in absolute units. There are several possible distance units, e.g.: pixels (50px), points (50pt), millimeters (50mm), centimeters (1cm), inches (2in). Another way is to define the distance as percentage of the window height/width. To do this, just write a number as percentage (“50%”). See here more information about defining distances, including additional measurement units available in HTML. And yes – sometimes getting things to appear precisely where you want them is not trivial, and you may have to consult someone who knows HTML/CSS and perhaps edit manually the HTML file we generated for you.
These are the parameters that define the object’s position and its bounding box size:
- top (optional): The horizontal position of the text element (specifically: the top side of the text’s bounding box) relative to the reference point. Positive = lower. Default = 0. Read more details here.
- left (optional): The vertical position of the text element (specifically: the left side of the text’s bounding box) relative to the reference point. Positive = lower. Default = 0. Read more details here.
- height (optional): The height of the bounding-box that contains the text. Read more details here.
- width (optional): The width of the bounding-box that contains the text. Read more details here.