MTA managing text flow by using css
Upcoming SlideShare
Loading in...5
×
 

MTA managing text flow by using css

on

  • 690 views

Microsoft Examination for HTML 5

Microsoft Examination for HTML 5

Statistics

Views

Total Views
690
Slideshare-icon Views on SlideShare
690
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.

MTA managing text flow by using css MTA managing text flow by using css Presentation Transcript

  • 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 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
  • A Web Layout with Columns Content flow Illustration: © Megan Tamaccio/iStockphoto 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 Flow between Regions 2 1 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 container 7
  • 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 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
  • 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 24 – none: Prevents hyphenation
  • 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 31 Internet Explorer 9
  • 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