Box Dimensions with CSS

The dimensions of a CSS box are defined mainly by width and height, min- width and max-width, and min-height and max-height, all of which can take any of a number of value types. The commonly used ones as of time of writing are auto (which is a keyword that lets the browser determine value), inherit (which is a keyword that says to inherit value from the parent), initial (which sets value to default value), length values (which are any measure of distance, such as px and em), and percentage values (which define value as a percentage of the size of the containing block). Box dimensions can also be specified using CSS logical properties. These properties define logical border edges based on flow direction of text within a line (e.g., left to right) and the flow direction of lines of text (e.g., top to bottom). The property used to define this direction is writing-mode and is introduced more fully later in Chapter 14. As of time of writing, the CSS logical properties are still in the draft stage. This means that some of the things presented here may be a little different in the finalized specification. Also, only Firefox supports the properties as of time of writing.

1. width and height

The width and height properties, both of which are non-inherited, specify the width and height, respectively, of an element’s box, which by default is just high enough for the element’s content but occupies the full width of the page. Figure 10.1 shows how these properties are used with both absolute and relative units, and Figure 10.2 depicts the result. In the example, 400px width and 200px height are specified for the <div> element, and the width and height of the <p> element are specified as 90% and 50% of these, respectively.

1.1. Specifying Logical Width and Height

The properties used to specify the logical width and height of an element are block- size and inline-size, and whether each defines width or height depends on the value of the writing-mode property (discussed in Chapter 14). Both of them are non-inherited and take the same values as the width and height properties; however, keyword values, such as border-box, content-box, min-content, max-content, available, fit-content, and auto, may also be supported. Figures 10.3 and 10.4 show how the properties are used and depict the result.

2. min-width and min-height and max-width and max-height

The min-width and min-height and max-width and max-height properties, all of which are non-inherited, are used to control the lower and upper limits of the size of a box, that is, the smallest size and the largest size at which a box can be displayed, irrespective of the size of browser window.

Limiting dimensions in this way is necessary for various reasons. With respect to width, it is to ensure that pages are not displayed so small on small screens that their contents are not legible or so wide on large screens that they require extreme movements of the eyes and head on the part of the user to view or read them. With respect to height, although setting min- height may seldom be necessary, setting max-height can be important, because if, during display, the depth of the content of a box is greater than the height of the box, the content will likely overrun the content of the box below, creating an unsightly presentation and text that is not possible to read. Figure 10.5 shows how the four properties are used, and Figure 10.6 depicts the result.

The rules in the example basically specify that the content of each <div> element box should not be displayed beyond the width of 630px, even if the width of the browser is greater than this. Similarly, it specifies that the content should not shrink beyond 400px, which means that if the browser window becomes narrower than this, the content will be cropped off. It also specifies a max-height of 120px, which means that if the content is more in height than this, it overflows into the content of the box below, displaying over it, as evident in Figure 10.6. Fortunately, CSS provides means of addressing this overflow problem.

2.1. Handling Content Overflow

Content overflows, both the one that overflows the bottom of a box and the one that overflows the side, are mainly handled using the combination of the overflow, white-space, and text-overflow properties, as necessary. Some of them hide or show overflow, while some can be used to specify to wrap content to the next line. When content wrapping is determined on the fly by the browser based on various current conditions, it is generally known as a soft wrap, while a deliberate wrap, such as the one created by a <p> element, is known as a hard wrap. The properties introduced here for managing content overflow in an element’s box can also be used for the content of a table. The styling of tables is discussed in Chapter 17.

2.1.1. overflow

The overflow property, which is non-inherited, specifies what to do with the content that overflows the borders of a box container or table cells. The common keyword values that it takes and their functions are listed in Table 10.1.

Figure 10.7 shows the addition of the overflow property to the rules shown earlier in Figure 10.5, and Figure 10.8 shows the effects. Notice that the browser sees it fit to add scrollbars.

2.1.2. white-space

The white-space property is inherited and allows you to control how white space inside an element is handled. The values that it supports are listed in Table 10.2.

Figure 10.9 shows how the property is used, and Figure 10.10 depicts the result. Notice in the code that there is white space between the starting <p> tags and where the content starts. Then, notice how the value used with each white-space property determines how the space is handled when the contents are displayed.

2.1.3. text-overflow

The text-overflow property is non-inherited and is used to specify how the browser should communicate to the user that there is content overflow that is not displayed. It applies to content that is overflowing only the side of a container box, not the bottom. Text can overflow when it is stopped from wrapping, for example, due to the use of white-space: no wrap declaration or a word being too long. The property does not make overflow to occur by itself. So, for it to have an effect, properties that cause overflow, such as the overflow property, must first be applied to an element. The typical values used with the property are described in Table 10.3. Figures 10.11 and 10.12 show how it is used and depict the effect.

In the rule, the white-space: no wrap; declaration says not to wrap the text. This means that when the text reaches the border, it is clipped. The overflow: hidden; declaration hides the overflow, and text-overflow: ellipsis; adds ellipsis, as shown in Figure 10.12, to show that the text is clipped.

2.1.4. overflow-wrap

The overflow-wrap allows you to specify whether or not the browser should break text lines in the middle of words to prevent them from overflowing the right or left edge of an element’s box. The element was originally known as word-wrap and is inherited. As of time of writing, only Chrome and Opera support the new name. The values that the property takes are normal (which means to break lines at normal word breakpoints) and break- word (which means that lines may be broken in the middle of words). Figures 10.13 and 10.14 shows how the property is used and depict the result.

The word-break property, which is also inherited, performs similar functions as overflow-wrap, except that it is more suitable for where text contains multiple languages, especially CJK (Chinese, Japanese, and Korean). The values supported are normal (which means to use default line break rule), break-all (which means to allow word breaks for non-CJK text), and keep-all (which disallows word breaks for CJK text and behaves as normal for non-C JK text).

2.1.5. hyphens

The hyphens property allows you to specify how to hyphenate words when text is wrapped. It is inherited, and Table 10.4 lists the values that are supported. Figures 10.15 and 10.16 show how it is used and depict the result.

In the example, the p.none{} rule says to wrap text, based on white space. The p.manual{} rule says to break the word “demonstrates” where the soft (invisible) hyphen character is inserted. Note that the soft hyphen can also be specified using its Unicode (thus: ). The p.auto{} rule says that the browser should decide.

2.2. Specifying Minimum and Maximum Logical Width and Height

The properties used to specify the logical minimum and maximum width and height of an element are min-block-size, min-inline-size, max-block- size, and max-inline-size, and whether each defines minimum or maximum width or height depends on the value of the writing-mode property (discussed in Chapter 14). They are non-inherited and take the same values as the min-width, min-height, max-width, and max-height properties introduced earlier; however, keyword values, such as none, min-content, max-content, fit- content, and fill-content, may also be supported in the finalized specification. Figure 10.17 shows how the properties are used.

In the example, given the value of writing-mode (which is in right-to-left, top-to- bottom text-flow direction), min-block-size defines minimum height, max-block- size defined maximum height, min-inline-size defined minimum width, and max-inline-size defined maximum width. The example produces the same result as specifying min-height: 300px; max- height: 900px; min-width: 400px; max-width: 1200px;, but if writing mode is changed, a different result is produced.

3. calc()

As mentioned in Chapter 6, the calc() function allows you to tell the browser to calculate values dynamically and can be used with any CSS numeric values, such as length, angle, time, and integer. It especially makes it easy to position elements symmetrically in a container, such as in the middle. It takes a mathematical expression that evaluates to the value used for a property. The expression combines operators such +, -, *, and /, which specify addition, subtraction, multiplication, and division, respectively. Figure 10.18 shows how the function is used, and Figure 10.19 depicts the result.

In the example, the rules say to make the widths of the <div> elements as the width of the browser minus 90px and 200px, respectively. The browser- width percentages can also be specified using the vw (viewport width) unit, introduced in Chapter 6, under responsive images. So, for example, the CSS declaration min-width: calc(50vw- 10 Opx) specifies that whatever be the width of the viewport, the minimum width (min-width) of the element to which the declaration is applied should be 50% of it minus lOOpx. Using it in center-aligning an element requires the use of other CSS properties, especially margin, which is discussed in the next section.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *