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