SlideShare una empresa de Scribd logo
1 de 33
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

Large-Scale Analysis of Style Injection by Relative Path Overwrite
Large-Scale Analysis of Style Injection by Relative Path OverwriteLarge-Scale Analysis of Style Injection by Relative Path Overwrite
Large-Scale Analysis of Style Injection by Relative Path OverwriteSajjad "JJ" Arshad
 
What's the origin of REST architectural style?
What's the origin of REST architectural style?What's the origin of REST architectural style?
What's the origin of REST architectural style?Rachel M. Carmena
 
Introduction to web services
Introduction to web servicesIntroduction to web services
Introduction to web servicesvikram mahendra
 
World wide web architecture presentation
World wide web architecture presentationWorld wide web architecture presentation
World wide web architecture presentationImMe Khan
 
"PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr...
"PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr..."PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr...
"PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr...Stefan Adam
 
Web Fundamentals
Web FundamentalsWeb Fundamentals
Web Fundamentalsarunv
 
Silverlight 2.0
Silverlight 2.0Silverlight 2.0
Silverlight 2.0Dave Allen
 
Globally Distributed RESTful Object Storage
Globally Distributed RESTful Object Storage Globally Distributed RESTful Object Storage
Globally Distributed RESTful Object Storage MongoDB
 
Cloud Hosted mongodb
Cloud Hosted mongodbCloud Hosted mongodb
Cloud Hosted mongodbPrem Sanil
 
Introduction to web designing
Introduction to web designingIntroduction to web designing
Introduction to web designingRajat Shah
 
Evolution Of The Web Platform & Browser Security
Evolution Of The Web Platform & Browser SecurityEvolution Of The Web Platform & Browser Security
Evolution Of The Web Platform & Browser SecuritySanjeev Verma, PhD
 

La actualidad más candente (15)

Web subjects
Web subjectsWeb subjects
Web subjects
 
Intro to Web Standards
Intro to Web StandardsIntro to Web Standards
Intro to Web Standards
 
Apache Multiview Vulnerability
Apache Multiview VulnerabilityApache Multiview Vulnerability
Apache Multiview Vulnerability
 
Large-Scale Analysis of Style Injection by Relative Path Overwrite
Large-Scale Analysis of Style Injection by Relative Path OverwriteLarge-Scale Analysis of Style Injection by Relative Path Overwrite
Large-Scale Analysis of Style Injection by Relative Path Overwrite
 
What's the origin of REST architectural style?
What's the origin of REST architectural style?What's the origin of REST architectural style?
What's the origin of REST architectural style?
 
Introduction to web services
Introduction to web servicesIntroduction to web services
Introduction to web services
 
World wide web architecture presentation
World wide web architecture presentationWorld wide web architecture presentation
World wide web architecture presentation
 
"PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr...
"PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr..."PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr...
"PageRank" - "The Anatomy of a Large-Scale Hypertextual Web Search Engine” pr...
 
Web Fundamentals
Web FundamentalsWeb Fundamentals
Web Fundamentals
 
Blind xss
Blind xssBlind xss
Blind xss
 
Silverlight 2.0
Silverlight 2.0Silverlight 2.0
Silverlight 2.0
 
Globally Distributed RESTful Object Storage
Globally Distributed RESTful Object Storage Globally Distributed RESTful Object Storage
Globally Distributed RESTful Object Storage
 
Cloud Hosted mongodb
Cloud Hosted mongodbCloud Hosted mongodb
Cloud Hosted mongodb
 
Introduction to web designing
Introduction to web designingIntroduction to web designing
Introduction to web designing
 
Evolution Of The Web Platform & Browser Security
Evolution Of The Web Platform & Browser SecurityEvolution Of The Web Platform & Browser Security
Evolution Of The Web Platform & Browser Security
 

Destacado

Ntu campus
Ntu campusNtu campus
Ntu campuszoe lin
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome EconomyHelge Tennø
 
The Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsThe Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsBarry Feldman
 

Destacado (6)

Ntu campus
Ntu campusNtu campus
Ntu campus
 
Layers of the earth
Layers of the earthLayers of the earth
Layers of the earth
 
Guatemala
GuatemalaGuatemala
Guatemala
 
Personal Finance
Personal FinancePersonal Finance
Personal Finance
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome Economy
 
The Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsThe Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post Formats
 

Similar a MTA managing text flow by using css

Guía SEO 2020: Trucos y recomendaciones para desarrolladores y webmasters
Guía SEO 2020: Trucos y recomendaciones para desarrolladores y webmastersGuía SEO 2020: Trucos y recomendaciones para desarrolladores y webmasters
Guía SEO 2020: Trucos y recomendaciones para desarrolladores y webmastersMiguel López Zuleta
 
HTML (HyperText Markup Language)
HTML (HyperText Markup Language)HTML (HyperText Markup Language)
HTML (HyperText Markup Language)Amber Bhaumik
 
Choice of programming language for web developing.
Choice of programming language for web developing.Choice of programming language for web developing.
Choice of programming language for web developing.Mohammad Kamrul Hasan
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Flexbox, Grid and Sass
Flexbox, Grid and SassFlexbox, Grid and Sass
Flexbox, Grid and SassSeble Nigussie
 
Web Publishing terminology 1
Web Publishing terminology 1Web Publishing terminology 1
Web Publishing terminology 1Beth Lovell
 
Web technologies-course 04.pptx
Web technologies-course 04.pptxWeb technologies-course 04.pptx
Web technologies-course 04.pptxStefan Oprea
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.pptssuser568d77
 
Supplement web design
Supplement web designSupplement web design
Supplement web designshelly3160
 
Fundamentals of Web for Non-Developers
Fundamentals of Web for Non-DevelopersFundamentals of Web for Non-Developers
Fundamentals of Web for Non-DevelopersLemi Orhan Ergin
 
Web Programming& Scripting Lab
Web Programming& Scripting LabWeb Programming& Scripting Lab
Web Programming& Scripting LabSwapnali Pawar
 
Training presentation
Training presentationTraining presentation
Training presentationTayseer_Emam
 
Stupid Index Block Tricks
Stupid Index Block TricksStupid Index Block Tricks
Stupid Index Block Trickshannonhill
 

Similar a MTA managing text flow by using css (20)

Guía SEO 2020: Trucos y recomendaciones para desarrolladores y webmasters
Guía SEO 2020: Trucos y recomendaciones para desarrolladores y webmastersGuía SEO 2020: Trucos y recomendaciones para desarrolladores y webmasters
Guía SEO 2020: Trucos y recomendaciones para desarrolladores y webmasters
 
HTML (HyperText Markup Language)
HTML (HyperText Markup Language)HTML (HyperText Markup Language)
HTML (HyperText Markup Language)
 
DHTML
DHTMLDHTML
DHTML
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
Choice of programming language for web developing.
Choice of programming language for web developing.Choice of programming language for web developing.
Choice of programming language for web developing.
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Guide Hosting Dictionary
Guide Hosting DictionaryGuide Hosting Dictionary
Guide Hosting Dictionary
 
Flexbox, Grid and Sass
Flexbox, Grid and SassFlexbox, Grid and Sass
Flexbox, Grid and Sass
 
Web Publishing terminology 1
Web Publishing terminology 1Web Publishing terminology 1
Web Publishing terminology 1
 
Web technologies-course 04.pptx
Web technologies-course 04.pptxWeb technologies-course 04.pptx
Web technologies-course 04.pptx
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Css3
Css3Css3
Css3
 
Supplement web design
Supplement web designSupplement web design
Supplement web design
 
Fundamentals of Web for Non-Developers
Fundamentals of Web for Non-DevelopersFundamentals of Web for Non-Developers
Fundamentals of Web for Non-Developers
 
Web Programming& Scripting Lab
Web Programming& Scripting LabWeb Programming& Scripting Lab
Web Programming& Scripting Lab
 
Training presentation
Training presentationTraining presentation
Training presentation
 
Stupid Index Block Tricks
Stupid Index Block TricksStupid Index Block Tricks
Stupid Index Block Tricks
 
web devs ppt.ppsx
web devs ppt.ppsxweb devs ppt.ppsx
web devs ppt.ppsx
 

Último

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 

Último (20)

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 

MTA managing text flow by using css

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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

Notas del editor

  1. Tip: Add your own speaker notes here.
  2. Tip: Add your own speaker notes here.
  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.