Managing Text Flow by Using CSS

Lesson 6

Exam Objective Matrix

Skills/Concepts MTA Exam Objectives

Managing the Flow of Text Content by Using CSS

Manage the flow of text content by using CSS. (3.3)

Understanding and Using Regions to Flow Text Content between Multiple Sections

Manage the flow of text content by using CSS. (3.3)

2

A Web Layout with Columns

Illustration: © Megan Tamaccio/iStockphoto

Content flow

3

CSS Regions• Feature allows developers to

dynamically flow content across multiple boxes, or containers, in HTML documents with fluid layouts

• Content adjusts and displays properly whether viewed on large or small

4

Content Flow with CSS Regions

1 2 3

5

Non-contiguous Content Flowbetween Regions

1 2

6

CSS Regions Concepts• Content source: One or more

blocks of text in the same or a separate HTML document that holds the content you want to flow through a layout

• Content containers: Areas into which content is flowed

• Named flow: A set of elements taken from the source and to be flowed into a content container7

CSS Regions Concepts (Continued)• Within content source, element that

contains content to be flowed is assigned the flow-into CSS property– Value of this property is named flow

• flow-from CSS property creates the content container, which is a CSS Region– Value for this property must match

the named flow value of the flow-into property 8

CSS Regions Example

9

CSS Regions Example

10

CSS Regions Example: Resizing the Screen Reflows the Content

11

Overflowing Text• region-overflow and overflow

properties control how last region handles overflow content

• region-overflow is set to auto or break– auto value can specify overflow

property as visible or hidden

12

Overflow Example• For overflow content to continue to

flow and be visible:.region {region-overflow:auto;overflow:visible;}

13

Overflow Example

14

Microsoft Implementation of CSS Regions• Microsoft has own implementation of

CSS Regions• Uses iframes, which are like mini

boxes on a Web page that contain external content embedded in an HTML document, as the content source

• Must use the -ms- vendor prefix with the flow-into and flow-from properties 15

Microsoft Implementation of CSS Regions• Example of iframe element with a

unique ID (added to a master page):<iframe id="main-data-source" src="source.html" />

• Then create named flow using a CSS selector that specifies the data source:#main-data-source { -ms-flow-into: main; }

16

Microsoft Implementation of CSS Regions• To create content containers, assign

class name to elements to use as containers:<div class="region"></div><div class="region"></div>

• Then create a CSS selector that specifies the data source from which to accept the content flow:.region { -ms-flow-from: main; }

17

Multi-column Layout• Create columns by dividing text

across multiple columns• Specify the amount of space that

appears between columns (the gap)• Make vertical lines (rules) appear

between columns• Define where columns break

18

Multi-column Layout• Main CSS properties for creating multiple

columns in an HTML document:– column-count: Sets the number of columns

• Alternative: Use columns property with column-count and column-width properties

– column-gap: Specifies the gap between the columns, known as the gutter or alley

– column-rule: Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule

19

Multi-column Layout Example

20

Multi-column Layout Example

21

Adding Column Rule and Adjusting Gap• column-rule: 3px dashed blue;• column-gap: 3em;

22

Result of Resizing Browser Window

23

Hyphenation• The process of connecting two words with

a hyphen mark (-) or breaking words between syllables at the end of a line.

• CSS3 hyphens property controls hyphenation

• Values:– auto: Enables automatic hyphenation of

words based on line-break opportunities within words or by a “language-appropriate hyphenation resource”

– manual: Enables hyphenation of words based only on line-break opportunities within words

– none: Prevents hyphenation

24

Language Declaration• W3C requires a language declaration

for correct automatic hyphenation to occur:<!doctype html><html lang="en-us">

or<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">

25

Microsoft-specific Hyphenation Properties• -ms-hyphenate-limit-zone: Specifies the

width of the trailing whitespace (called the hyphenation zone) that can be left in a line before hyphenation occurs; the property’s value is a length in pixels or a percentage

• -ms-hyphenate-limit-chars: Specifies the minimum number of characters in a word that may be hyphenated; if the character count is lower than the minimum, the word is not hyphenated

• -ms-hyphenate-limit-lines: Specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words

26

Hyphenation Zone

Hyphenation zone

27

Microsoft Hyphenation Example

28

CSS Exclusions• Formerly referred to as positioned

floats• Enables positioning of images, text,

and boxes anywhere in an HTML document and wrapping of text completely around these elements

• Can control the position of a float precisely, at a specified distance from the top, bottom, left, or right sides of a container 29

CSS Exclusions Example 1

Screen shot from Internet Explorer 10 Test Drive Web page

30

CSS Exclusions Properties• wrap-flow:both displays content on all

sides of the exclusion• wrap-flow:clear displays content

above and below the exclusion but leaves the sides blank

• shape-inside and shape-outside define the content and the general shape of an exclusion, respectively

• -ms- vendor prefix required for Internet Explorer 10; Exclusions not supported in Internet Explorer 9 31

CSS Exclusions Example 2

32

Recap• General Web layout with columns• CSS Regions

– Content flow with CSS Regions– Overflowing text

• Microsoft implementation of CSS Regions• Multi-column layout• Hyphenation

– Microsoft-specific hyphenation properties• CSS Exclusions

33