Download to read offline
Uploaded byDhairya Joshi
MTA managing text flow by using css
This document discusses various techniques for managing text flow using CSS, including CSS regions, multi-column layouts, hyphenation, and exclusions. CSS regions allow content to dynamically flow across multiple containers with fluid layouts. Multi-column layouts divide text across multiple columns. Hyphenation controls breaking words between syllables at line ends. Exclusions enable precisely positioning images and boxes within text and wrapping text around them.
MTA managing text flow by using css
- 1. Managing Text Flowby Using CSS Lesson 6
- 2. Exam Objective Matrix Skills/Concepts MTAExam 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 Layoutwith Columns Content flow Illustration: © Megan Tamaccio/iStockphoto 3
- 4. CSS Regions • Featureallows 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 withCSS Regions 1 2 3 5
- 6. Non-contiguous Content Flow betweenRegions 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.
- 10.
- 11. CSS Regions Example:Resizing the Screen Reflows the Content 11
- 12. Overflowing Text • region-overflowand 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 • Foroverflow content to continue to flow and be visible: .region { region-overflow:auto; overflow:visible; } 13
- 14.
- 15. Microsoft Implementation ofCSS 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 ofCSS 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 ofCSS 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 • Createcolumns 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 • MainCSS 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.
- 21.
- 22. Adding Column Ruleand Adjusting Gap • column-rule: 3px dashed blue; • column-gap: 3em; 22
- 23. Result of ResizingBrowser Window 23
- 24. Hyphenation • The processof 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 • W3Crequires 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.
- 28.
- 29. CSS Exclusions • Formerlyreferred 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 Example1 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.
- 33. Recap • General Weblayout 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
Editor's Notes
- #3 Tip: Add your own speaker notes here.
- #4 Tip: Add your own speaker notes here.
- #5 Tip: Add your own speaker notes here.
- #6 Tip: Add your own speaker notes here.
- #7 Tip: Add your own speaker notes here.
- #8 Tip: Add your own speaker notes here.
- #9 Tip: Add your own speaker notes here.
- #10 Tip: Add your own speaker notes here.
- #11 Tip: Add your own speaker notes here.
- #12 Tip: Add your own speaker notes here.
- #13 Tip: Add your own speaker notes here.
- #14 Tip: Add your own speaker notes here.
- #15 Tip: Add your own speaker notes here.
- #16 Tip: Add your own speaker notes here.
- #17 Tip: Add your own speaker notes here.
- #18 Tip: Add your own speaker notes here.
- #19 Tip: Add your own speaker notes here.
- #20 Tip: Add your own speaker notes here.
- #21 Tip: Add your own speaker notes here.
- #22 Tip: Add your own speaker notes here.
- #23 Tip: Add your own speaker notes here.
- #24 Tip: Add your own speaker notes here.
- #25 Tip: Add your own speaker notes here.
- #26 Tip: Add your own speaker notes here.
- #27 Tip: Add your own speaker notes here.
- #28 Tip: Add your own speaker notes here.
- #29 Tip: Add your own speaker notes here.
- #30 Tip: Add your own speaker notes here.
- #31 Tip: Add your own speaker notes here.
- #32 Tip: Add your own speaker notes here.
- #33 Tip: Add your own speaker notes here.