HTML5 (Lesson 6 by cbastiao)
You can also create a float in any shape: ___
rectangular, circular, triangular, and just about anything in between.
Now let's add a «column rule». This property sets the ___
width, style, and color of the rule between all columns.
Positioned floats are called ___
«CSS Exclusions» in the latest W3C specification.
You must (also) use the -ms- vendor prefix with the «flow-into» and ___
«flow-from» properties.
Within the content source, the element that contains the content to be flowed is assigned the ___
«flow-into» CSS property.
To implement CSS Regions, you need to specify a content source and content containers. You accomplish both tasks using the ___
«flow-into» and «flow-from» CSS properties.
The value for the «flow-from» property must match the 'named flow' value of the ___
«flow-into» property—this is how the content source and content container are associated.
You can control how the last region handles overflow content using the ___
«region-overflow» and «overflow» properties.
Generally, automatic hyphenation attempts to justify text at the ___
right margin.
A «content source» may be 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. The content is referred to as a ___
"content stream."
..then you would create the 'named flow' using a CSS selector that specifies the data source: ___
#main-data-source { -ms-flow-into: main; }
Within the content source, the element that contains the content to be flowed is assigned the «flow-into» CSS property. The value of this property is called a ___
'named flow'.
To control the size of the gutter between columns, use the ___
*column-gap* property.
To specify whether an element such as a heading should span columns, use the ___
*columns-span* property.
To use any CSS Exclusions properties for rendering in Internet Explorer 10, add the ___
-ms- vendor prefix.
Microsoft provides additional hyphenation properties that are specific to Microsoft environments, as follows: ___
-ms-hyphenate-limit-zone, -ms-hyphenate-limit-chars, -ms-hyphenate-limit-lines
..then create a CSS selector that specifies the data source from which to accept the content flow: ___
.region { -ms-flow-from: main; }
For example, if you want overflow content to continue to flow and be visible, you would use the following syntax: ___
.region { region-overflow: auto; overflow:visible; }
Using the «break» value for «region-overflow» will prevent content from overflowing the last region, truncating the content at that point. The syntax is:
.region { region-overflow:break; }
...The following code uses the auto value for column width: ___
.tricolumn { columns: 3 auto; }
if your entire HTML document is in the same language (English, for example) and you want to enable automatic hyphenation, add the attribute to your HTML element or doctype declaration, such as: ___
<!doctype html> <html lang="en-us"> or <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
To create content containers, assign a class name to the elements you want to use as containers: ___
<div class="region"></div> <div class="region"></div>
For example, the following shows an «iframe» element with a unique ID, which you would add to a master page: ___
<iframe id="main-data-source" src="source.html" />
The following markup with inline CSS uses the -ms-hyphens property, which is set to auto: ___
<p style="-ms-hyphens: auto; text-align: justify; font-size: 14pt;"> Hyphenation is the process of connecting . . . more professional. </p>
<style> .tricolumn { column-count: 3; } </style> We modified the code for all four of the major browsers : ___
<style> .tricolumn { -ms-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -webkit-column-count: 3; } </style>
This code uses the column-count property to create three columns : ___
<style> .tricolumn { column-count: 3; } </style> ... <div class="tricolumn"> Lorem ipsum . . orci. </div>
break-after ? ___
Inserts a break after the generated column box
break-before ? ___
Inserts a break before the generated column box
break-inside ? ___
Inserts a break within the generated column box
wrap ? ___
Is a shorthand method of setting the wrap-flow, wrap-margin, and wrap-padding properties in one declaration
column-rule ? ___
Is a shorthand property that sets the column-rule-width, column-rule-style, and column-rule-color properties at the same place in a style sheet
columns ? ___
Sets the *column-width* and *column-count* properties simultaneously
«column-count»: ___
Sets the number of columns an element should be divided into; can also use the «columns» property with values to set «column-count» and «column-width» properties simultaneously
Multi-column properties used in CSS3 : ___
break-after, break-before, break-inside, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, columns
«Hyphenation» is the process of connecting two words with a hyphen mark (-) or ___
breaking words between syllables at the end of a line.
Microsoft and Adobe collaborated with the W3C to create the ___
concept of CSS Regions for Web-based content flow.
«CSS Regions» allows developers to dynamically flow ___
content across multiple boxes, or containers, in HTML documents with fluid layouts.
You declare an exclusion shape using the «shape-inside» and «shape-outside» properties, which define the ___
content and the general shape of an exclusion, respectively.
the «flow-from» CSS property creates the ___
content container, which is a CSS Region.
To implement CSS Regions, you need to specify a content source and ___
content containers.
The "column box" is between the content box and the ___
content in the original CSS Box model.
A «content source» may be 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.
The W3C points out that you must declare a language using the HTML lang or XML xml:lang attributes for ___
correct automatic hyphenation to occur.
In order for CSS Regions to work, content flow can't affect the ___
height of a region
CSS3 multi-column layout uses the concept of the "column box" to refer to the container that ___
holds content and displays it in columns.
CSS3 introduces the «hyphens» property, which controls ___
hyphenation.
Positioned floats, now called CSS Exclusions, enable you to completely wrap text around ___
images, shapes, and containers of text.
-ms-hyphenate-limit-lines, specifies the maximum number of consecutive hyphenated lines that ___
may contain hyphenated words
As you can see, the column-related properties provide flexible content display with ____
minimal CSS declarations.
You can also have multiple sources and assign the «flow-into» property to ___
multiple elements.
CSS Regions lets you flow content between ___
neighboring or distant areas in an HTML document.
A region receives as much content as it can hold and then flows the remaining content into the ___
next region.
CSS3 introduces the hyphens property, which controls hyphenation. The property uses the values ___
none, manual, and auto
In order for CSS Regions to work, content flow can't affect the height of a region—you need to define region heights in your CSS so they are ___
not flexible.
Desktop publishing software makes it easy to connect content in different areas, so that changes made to one area allows content to ___
reflow properly to other connected areas.
«region-overflow» is set to either «auto» or «break». Using the «auto» value, you can ___
specify the overflow property as «visible» or «hidden».
With CSS Exclusions, you can control the position of a float precisely, at a specified distance from the ___
top, bottom, left, or right sides of a container.
Hyphenation breaks words between syllables at the end of lines to create a more ___
uniform right margin and eliminate gaps of whitespace within paragraphs.
column-count ? ___
Sets the number of columns an element will use
msGetRegionContent: ___
A script method defined by Microsoft as returning "an array of Range instances corresponding to the content from the region flow that is positioned in the region"
msRegionUpdate: ___
Allows you to manipulate regions dynamically
«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
shape-outside ? ___
Creates the general shape of an exclusion
hyphens: auto ? ___
Enables automatic hyphenation of words based on line-break opportunities within words or by a "language-appropriate hyphenation resource"
hyphens: manual ? ___
Enables hyphenation of words based only on line-break opportunities within words
msRegionOverflow: ___
Handles content overflow, similar to the region-overflow property
shape-inside ? ___
Modifies a shape's contents
hyphens: none ? ___
Prevents hyphenation
wrap-padding ? ___
Provides a pad (an offset) for content inside an element
wrap-margin ? ___
Provides an offset for content outside the element
wrap-through ? ___
Specifies how content should wrap around an exclusion element
wrap-flow ? ___
Specifies how exclusions affect inline content within block-level elements
column-fill ? ___
Specifies how to fill columns; balances content equally between columns, if possible, or fills columns sequentially
column-rule-color ? ___
Specifies the color of the rule between columns
column-gap ? ___
Specifies the gap between columns
«column-gap»: ___
Specifies the gap between the columns, which is also known as the gutter or alley
-ms-hyphenate-limit-lines: ___ ?
Specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words
-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
column-rule-style ? ___
Specifies the style of the rule between columns, such as «solid» or «double», «dashed», and so on
column-width ? ___
Specifies the width of a column or columns
column-rule-width ? ___
Specifies the width of the rule between columns
-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
column-span ? ___
Specifies whether an element should span no columns or all columns
If there is still content left over after all regions are filled, one of three situations can occur: ___
The overflow content in the last region will: • Be truncated • Continue overflowing and be visible • Continue overflowing but be hidden
Microsoft also uses the «-ms-wrap-side» and «-ms-flow-wrap» properties, which aren't part of the ___
W3C specification.
To create a simple CSS exclusion, use the «wrap-flow: both» property to display content on ___
all sides of the exclusion.
A «positioned float» is a CSS construct that enables you to position images, text, and boxes ___
anywhere in an HTML document and then wrap text completely around these elements.
Another way to use the «columns property» is to ___
assign a number value to column-width and leave column-count set to auto.
«region-overflow» is set to either ___
auto or break.
Another option is to use «wrap-flow: clear», which displays content above and ___
below the exclusion but leaves the sides blank.
Although CSS3 enables you to use multi-column layout to separate content into columns, «CSS Regions» offer ___
better control of content flow in more complex layouts.
Microsoft's method of implementing CSS Regions varies a ___
bit from the W3C
-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 main CSS properties you use to create and manipulate multiple columns in an HTML document are: ___
column-count, column-gap, column-rule
To control the size of the gutter between columns, use the column-gap property. This property uses an integer value or the keyword «normal»: ___
column-gap: 3em;
Because CSS3 columns are still a work in progress, you may need to add vendor prefixes to ___
column-related property names.
Now let's add a «column rule». This property sets the width, style, and color of the rule between all columns. The syntax for a dashed blue line that's 3 pixels wide is: ___
column-rule: 3px dashed blue;
You combine CSS Regions with CSS layout techniques, such as ___
columns, flexboxes, and grid layouts.
This example sets column-width to 15em, which means the multi-column element will have a column width of 15 ems (or 15 times the width of the font size of the content in the column): ___
columns: auto 15em;
CSS Regions are ___
defined areas (regions) of an HTML document where content can flow.
The DOM is a W3C specification that ___
describes the structure of dynamic HTML and Extensible Markup Language (XML) documents in a way that allows a Web browser to manipulate.
Microsoft recommends using CSS Regions for page layout and JavaScript when ___
developing Metro style apps in Windows 8 and Internet Explorer 10.
To specify whether an element such as a heading should span columns, use the «columns-pan» property. This property is set to a number of columns to span or uses the «all» (column-span: all;) or «none» keywords, which means an element spans all columns or ___
does not span any columns, respectively.
In a typical HTML document, you can display content in different sections or areas, but ___
each area is independent. If you want overflow text to move from one area to another, you generally have to do so manually.
Hyphenation is highly useful for multi-column layouts to ___
eliminate white space within columns left by long words that automatically wrap to the next line, making text appear more professional.
Microsoft uses «iframes», which are like mini boxes on a Web page that contain ___
external content embedded in an HTML document, as the content source.
Today, CSS Regions, CSS Exclusions, and multi-column layouts help you ___
flow content dynamically.
CSS Regions are defined areas (regions) of an HTML document where content can flow. When there's too much content to fit in one region, the remaining content automatically ___
flows into the next region.
Hyphenation, which breaks words between syllables at the end of lines, is also important to ___
fluid layouts, enabling full justification of standalone paragraphs and those in columns.
The DOM allows programs and scripts to update content, structure, and styles on the ___
fly - anything in an HTML or XML file can be modified.
Using the «break» value for «region-overflow» will prevent content from ___
overflowing the last region, truncating the content at that point.
You can also enable hyphenation to properly break words at the end of lines, which avoids the ___
problem of long words wrapping to the next line and leaving a gap on the previous line.
Content flow has, historically, been a manual ___
procedure in HTML documents.
CSS3 properties for «multi-column layout» let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns (the gap), make vertical lines (___) appear between columns, and define where columns break.
rules
You could accomplish multiple columns using the «columns property», which is a shorthand way of ___
setting the number of columns and the column width in one declaration.
W3C properties related to CSS Exclusions: ___
shape-outside, shape-inside, wrap, wrap-flow, wrap-margin, wrap-padding, wrap-through
An HTML document with content containers acts as a master page, like a ___
template, in which each container is sized and positioned where you want content to appear, but each container is initially empty.
«content containers», which are ___
the areas into which content is flowed.
CSS3 enables you to create multi-column layouts that work much like ___
the columns feature in Microsoft Word.
CSS3 properties for «multi-column layout» let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns ( ___ ), make vertical lines (rules) appear between columns, and define where columns break.
the gap
You can now create multiple columns - newspaper style - in HTML documents that scale based on ___
the user's screen size.
-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