background preloader

Ch6 Managing text flow by using CSS

Facebook Twitter

Exclusions. Cascading Style Sheets (CSS) Exclusions are new in Internet Explorer 10 and Windows Store apps using JavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow. Support for CSS Exclusions in Internet Explorer 10 and Windows Store apps using JavaScript enables scenarios like the one illustrated in the following image, where the app shown is laid out similarly to the way in which you might design a page in a desktop publishing application like Microsoft Word or Adobe InDesign. Exclusion terms defined Exclusion element Exclusion area Float area Content area Wrapping context The exclusion element You can view this page.

Explore new ideas in website design and layout (Internet Explorer) With strong support for Cascading Style Sheets, Level 3 (CSS3) in Internet Explorer 10 and Windows Internet Explorer 9, you can be sure that your website's design "just works" across all popular browsers. This portion of the Windows Internet Explorer Dev Center shows you some of the potential that enhanced support for the Cascading Style Sheets (CSS) standard creates for your website's content design and layout.

This topic contains the following sections: Internet Explorer 10 how-to topics The following topics highlight several new CSS capabilities in Internet Explorer 10: Internet Explorer 9 how-to topics The following topics highlight several CSS features starting with Internet Explorer 9: Designer guide to new CSS features If you're a seasoned web designer, you know how frustrating it can be when different browsers offer varied levels of support for the cutting-edge features you want to use. Here are some highlights from Internet Explorer 10: Here are highlights from Internet Explorer 9:

CSS3 Flexbox Layout module. Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects.

Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. Il a subi une refonte intégrale en décembre 2014 pour se mettre à jour. En action ! Démonstration display: flex Compatibilité Tableau des compatibilités Standardisation. Hands On: CSS3 Regions. CSS Regions Module Level 1. Abstract The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions, fragmented as defined in [CSS3-BREAK]. This module also defines CSSOM to expose both the inputs and outputs of this fragmentation. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This is a public copy of the editors’ draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification.

This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction This section is non-normative. The core concept behind CSS Regions is the ability to say, "Display this content (a named flow) over there (a region chain). " <article> ...some content... <article> ...some content... Note. MultiColumns properies and other properties. Hyphenation and others. Abstract This CSS3 module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation. Status of This Document This section describes the status of this document at the time of its publication. Publication as a Last Call Working Draft does not imply endorsement by the W3C Membership.

This CSS module has been produced as a combined effort of the W3C Internationalization Activity, and the Style Activity and is maintained by the CSS Working Group. This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. The following features are at risk and may be cut from the spec during its CR period if there are no (correct) implementations: This specification is a Last Call Working Draft. Feedback on this draft should be posted to the (archived) public mailing list www-style@w3.org (see instructions) with [css-text] in the subject line. 1. 1.1. 1.2.

Hyphenation. Internet Explorer 10 and Windows Store apps using JavaScript in Windows 8 introduce support for an important CSS Text Level 3 feature: hyphenation. Automatic hyphenation is especially useful given the new support for multi-column layout. Specifically, by using Cascading Style Sheets, Level 3 (CSS3) Hyphenation, you can do the following: Hyphenate text automatically according to a built-in dictionary Specify the minimum number of characters a word must have before it can be hyphenated Specify a minimum word fragment length following a hyphenation break Specify a minimum word fragment length preceding a hyphenation break Specify a hyphenation "zone," outside of which hyphenation is forced Specify a maximum number of consecutive hyphenated lines Note Because of the preliminary status of the Hyphenation portion of the CSS3 Text Working Draft, the properties in this topic must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10.

<! <! <! <! API Reference. CSS Exclusions Module Level 1. Editor's Draft 1 October 2013 This version: Latest version: Editor's Draft: Previous version: Editors: Vincent Hardy, Adobe Systems, Inc., vhardy@adobe.com Rossen Atanassov, Microsoft Corporation, ratan@microsoft.com Alan Stearns, Adobe Systems, Inc., stearns@adobe.com Issues List: in Bugzilla Feedback: www-style@w3.org with subject line “[css-exclusions] ” (archives) Test Suite: Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. Abstract CSS Exclusions define arbitrary areas around which inline content ([CSS21]) can flow. Status of this document This is a public copy of the editors' draft.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity).