Microsoft Examination for HTML 5

1. Managing Text Flow by Using CSS
Lesson 6

2. Exam Objective Matrix
Skills/Concepts
MTA Exam Objectives
Managing the Flow of Text
Content by Using CSS
Understanding and Using
Regions to Flow Text
Content between Multiple
Sections
Manage the flow of text content by using CSS.
(3.3)
Manage the flow of text content by using CSS.
(3.3)
2

3. A Web Layout with Columns
Content flow
Illustration: © Megan Tamaccio/iStockphoto
3

4. 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

5. Content Flow with CSS Regions
1
2
3
5

6. Non-contiguous Content Flow
between Regions
2
1
6

7. 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
container
7

8. 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

9. CSS Regions Example
9

10. CSS Regions Example
10

11. CSS Regions Example: Resizing the Screen
Reflows the Content
11

12. 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

13. Overflow Example
• For overflow content to continue to flow
and be visible:
.region {
region-overflow:auto;
overflow:visible;
}
13

14. Overflow Example
14

15. 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

16. 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

17. 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

18. 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

19. 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 columncount 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

20. Multi-column Layout Example
20

21. Multi-column Layout Example
21

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

23. Result of Resizing Browser Window
23

24. 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
24
– none: Prevents hyphenation

25. 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

26. 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

27. Hyphenation Zone
Hyphenation zone
27

28. Microsoft Hyphenation Example
28

29. 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

30. CSS Exclusions Example 1
Screen shot from Internet Explorer 10 Test Drive Web
page
30

31. 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
31
Internet Explorer 9

32. CSS Exclusions Example 2
32

33. 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