Who are the next billion users and how do we accommodate them

Where are the next billion users for our applications come from? When answering this question we have to be careful. The answer itself is easy, the implications of the answer, not so much. I’ll leverage 2 presentations to support the rest of the essay.

Tal Oppenheimer from Google’s Chrome team made a very interesting and thought provoking presentation about building the web for the next billion users and what we should consider when building our experiences.

Bruce Lawson from Opera takes a different view of the next billion users. He warns us about where these users are coming from and what we need to do on our end to make their experience with you app better.

We, western web developers, are spoiled by choice. We have above average bandwidth, devices are powerful and have plenty of storage and we have both desktop and mobile devices for everyday use as well as development. We can also argue about build tools and about frameworks and debate the little minutiae of front end web development

But not all our users have the same hardware we do and bandwidth doesn’t cost the same everywhere. Not all developers have the same resources than we do.

If we take for a fact that the next billion users will come from Asia (not counting Japan) and Africa then we definitely have to change our mindset as developers.

I’ll pick India and China as two examples of what the next billion users may look like. I will not cover political censorship or the Great firewall in China. I don’t know how the firewall works and it’s outside my area of expertise. I also don’t want to deal with politics.

Infrastructure and cost

The first thing we need to consider is how much does it cost to go online. Even if connectivity is expensive we have better infrastructure and, in metropolitan areas, we have better options for speed and they continue to improve.

In countries like India the number of internet users has increased but not at the same rate as infrastructure and therefore the cost of that infrastructure is higher in India than it would be elsewhere.

Some times we forget that Javascript or no Javascript is more than having it turned on or off but also of it being available. Do we plan for what happens if a JavaScript request times out or if the user agent

The idea behind Progressive Enhancement is to have content for all browsers, regardless of capabilities. Most apps I’ve interacted with will present blank screens when Javascript fails… for whatever reason.

What happens when your connection is so slow that the request times out regardless of how much you’re compressing your data. Or what happens when you’re using a proxy browser like Opera Mini in its current incarnation where most Javascript and CSS is not supported in the payload the server sends to the browser?

Aaron Gustafson’s Understanding Progressive Enhancement presents the best defintion of progressive enhancement and graceful degradation:

THE GRACEFUL DEGRADATION PERSPECTIVE
Graceful degradation focuses on building the website for the most advanced/capable browsers. Testing in browsers deemed “older” or less capable usually takes place during the last quarter of the development cycle and is often restricted to the previous release of the major browsers (IE, Mozilla, etc.).

Under this paradigm, older browsers are expected to have a poor, but passable experience. Small fixes may be made to accommodate a particular browser. Because they are not the focus, little attention is paid beyond fixing the most egregious errors.

 

THE PROGRESSIVE ENHANCEMENT PERSPECTIVE
Progressive enhancement focuses on the content. Note the difference: I didn’t even mention browsers.

Content is the reason we create websites to begin with. Some sites disseminate it, some collect it, some request it, some manipulate it, and some even do all of the above, but they all require it. That’s what makes progressive enhancement a more appropriate paradigm. It’s why Yahoo! swiftly adopted it and used it to create their Graded Browser Support strategy.

I am normally an advocate for progressive enhancement but for it to be an effective strategy we need to have content to enhance.

The browser landscape

One of the biggest surprises when researching this article was the difference browser landscape between the China, India and the US and the appearance of new browsers in the landscape that, while available in the US, have a significantly larger market share in Asia.

The tables below are taken from stat counter and reflect data from June 2015 to June 2016.

StatCounter-browser-IN-monthly-201506-201606-bar

Top 9 Mobile & Tablet Browsers in China from June 2015 to June 2016

StatCounter-browser-US-monthly-201506-201606-bar

I’m making the assumption that the version of Opera used in India and China is Opera Mini and that UC Browser is also a proxy browser

Opera Mini and UC Browser are proxy browsers. They work by sending your request to a remote server that fetches the resources for your page, filters some of the content, and returns a compressed blob to the device to render. Because of the way the current version of these browsers fetch the content they don’t handle Javascript or most things we take for granted.

How do we create content?

When we look at this question we should look at the following aspects:

  • The actual content we create
  • Handling device limitations and how it affects the content we create.

Cultural awareness on the content we create

Different audiences require different content and addressing issues that may not seem relevant. These are some examples:

In his presentation Bruce Lawson suggest we don’t require a last name because there are people in Asia who only use one name and requiring a last name means they can’t register for our service.

Even in countries that speak the same language words can have different meanings.

I’m a Spanish native speaker and always thought that guagua only means baby as it did where I grew up. But according to Wikitionary it may also mean bus in other areas where people speak the language.

Colors can have different meaning depending on the user’s cultural background. In the table below, taken from http://blog.globalizationpartners.com/culturally-customized-website.aspx, we can see how different cultures perceive color. How does the perception of color afect how people see your brand and content?

COLOR USA China India Egypt Japan
Red Danger
Love
Stop
Good fortune
Luck
Joy
Luck
Fury
Masculine
Death Anger
Danger
Orange Confident
Dependable
Corporate
Fortune
Luck
Joy
Sacred (the Color Saffron) Virtue
Faith
Truth
Future
Youth
Energy
Yellow Coward
Joy
Hope
Wealth
Earth
Royal
Celebration Mourning Grace
Nobility
Green Spring
Money
New
Health
Prosperity
Harmony
Romance
New
Harvest
Happiness
Prosperity
Eternal life
Blue Confident
Dependability
Corporate
Heavenly
Clouds
Mourning
Disgust
Chilling
Virtue
Faith
Truth
Villainy
Purple Royalty
Imagination
Royalty Unhappiness Virtue Wealth
White Purity
Peace
Holy
Mourning Fun
Serenity
Harmony
Joy Purity
Holiness
Black Funeral
Death
Evil
Heaven
Neutral
High Quality
Evil Death
Evil
 

Working with the constraints of users’ devices

Another thing to consider is device capabilities. As developers we should not think that everyone everywhere will have the same type of hardware we have available

How do you handle the limitations of proxy browsers when they are the main browser used by your target audience? Both UC Browser and Opera Mini are soon releasing (if they haven’t already) versions that will support more of the technologies to create Progressive Web Applications. Will it be enough to render your content as you intended? Will it be a close approximation?

If you decide to gracefully degrade your content how do you handle Proxy Browsers, since they will be your lowest common denominator?

Testing simulated speed and testing on devices

To get an idea of what would a slow connection would do to your application throttle the connection. This is only available in Chrome Dev Tools under the network tab

It’s a good approximation to what the experience is for users in that type of connection but it’s just that, an approximation. We should still test in the devices we expect our users to have and use.

We should also test on actual devices mirroring, as close as possible, the devices we expect our users to have

Device pile by Adactio on Flicker (cc by 2.0)
Device pile by Adactio on Flicker (cc by 2.0)

In addition to the variety of devices that we have in western countries (some of them shown in the image above) we have many other devices specific to regions or countries.

Do you recognize any of these phones?

  • Nokia X2 _01-3610 
  • Samsung E1282T
  • Nokia 2690
    These are the top three mobile phones used in India in 2015 based on Opera agregate data and presented by Bruce Lawson at Velocity. Look at the specs and form factors of these phones. How does it affect the design and development process?

One last aspect we need to consider is the size of our web content against what it’ll cost users to access it. India’s internet is slower and more expensive than we would expect.

In her presentation Tal Oppenheimer gives the example of some people in INdia having to spend salary equivalent to 17 hours of work to buy a 500MB data package.

If we accept that the standard web application developed in the US is 2MB in size (combination of HTML, CSS, JS, images and any additional content) How much are we asking our users in India (and other places with similar access cost) to spend just to interact with our content? How much are users choosing not to interact with our application because of its cost?

Conclusion

There are many factors to consider when working with the next billion users. This essay rises questions and beings the process of learning more about who the next users of our apps will be.

Typography II: Fonts to the page

We have typography on the web!

As John Allsopp points out in his blog Happy 17th Birthday CSS we have come a long way but we still have very far to go.

When I first started playing with web design back in 1996 the web was just plain. It was meant as a way to exchange information, not produce the high-end, high-gloss content we see today.

Surprisingly enough we’ve had the ability to embed fonts for over a decade. CSS2 included the ability to embed fonts when it was first released but it wasn’t highly used until CSS3 came out and fount foundries decided that there was money to be made online.

New elements in HTML5 and CSS3 (web fonts among them) allow some wonderful work to be done online without having to resort to images or overtly complicated CSS and Javascript tricks to make it look somewhat like what the designer had originally envisioned.

Examples of good web typography

Licensing: the big pain in the ass

Unfortunately every time we want to work with web fonts the ugly licensing monster raises its head. It’s not just a matter of purchasing the font, converting it to the correct formats (see How do we add fonts to the web? for the actual formats and process involved) but it also involves making sure that the font license allows you to use the font with @font-face techniques (read the EULA that comes with your font to make sure).

@font-face Embedding (Linking)

I didn’t include the @font-face font embedding method in the list above because it’s a different animal. @font-face doesn’t use PHP, JavaScript or Flash to embed the font. It solely relies on CSS and a compatible browser (see @font-face and 15 Free Fonts You Can Use Today for more information).

Information around the web isn’t exactly clear on this but my opinion is that the @font-face method isn’t really “embedding” but instead linking because you’re simply telling the browser where the actua font file is via CSS. This means the font file is directly accessable to your visitors, making this method quite different than the ones listed above.

Even if the font license permits font embedding, it may not permit embedding with @font-face because this method allows direct access to the font file. Microsoft uses the .eot font format (Embedded OpenType) as a solution to this problem. EOT is supposed to respect the flags in the font files for embedding and can be limited to specific domains. Non-IE browsers however, have not adopted this technology and don’t plan to. That means you’ll need to use a .ttf or .otf version of the font for non-IE browsers if you want true cross-browser compatibility.

If you decide to use @font-face, be absolutely, positively sure that the font license allows it. It should specifically state the use of @font-face is permitted and if there are any additional restrictions (ie. give credit somewhere).

From http://blog.themeforest.net/general/font-licensing-for-the-web/

Can I use an Adobe font on the web?

Adobe’s current End-User License Agreement (EULA) for fonts does not permit font linking with @font-face using any font format, including, but not limited to, desktop (“raw”) fonts and the Web Open Font Format (WOFF). Adobe provides select Adobe Web Fonts for use on the web through the Adobe Typekit® web font service, where web font usage is governed by the Typekit service Terms of Use.

A font’s usage permissions are specified in your EULA that accompanied the font when you acquired it. Refer to your EULA to determine the type of usage permitted.

From: http://www.adobe.com/products/type/font-licensing/licensing-faq.html

Typekit and other similar services provide an alternative licensing model. When you use Typekit-like services the fonts remain on the company’s server and you link to them using special Javascript that is specific to a user’s account.

What is Typekit?

The Adobe Typekit service provides secure, subscription-based web font hosting for web designers and developers, made possible by the @font-face rule. Typekit subscribers have access to a collection of fonts that can be used on basically any web site. You can view the Adobe Web Fonts available on the Typekit service on Adobe’s foundry page.

Although Typekit relies on the @font-face rule to work, it is different from web fonts used by end users. Fonts remain protected on the Typekit servers and are dynamically delivered to browsers in the appropriate format to ensure an optimal and consistent typographic experience. Typekit offers user-friendly integration with CSS and HTML code, and other optimizations, like font subsetting.

From: http://www.adobe.com/products/type/font-licensing/licensing-faq.html

You can pick fonts where the license specifically allow unrestricted use of the software. For example the Ubuntu font license states that:

This licence allows the licensed fonts to be used, studied, modified and redistributed freely. The fonts, including any derivative works, can be bundled, embedded, and redistributed provided the terms of this licence are met. The fonts and derivatives, however, cannot be released under any other licence. The requirement for fonts to remain under this licence does not require any document created using the fonts or their derivatives to be published under this licence, as long as the primary purpose of the document is not to be a vehicle for the distribution of the fonts.

From http://font.ubuntu.com/license

A final alternative is a service like Google fonts that provides easy access to a growing number of fonts. Like with the Typekit service, the fonts are still hosted on Google’s servers and it provides you with links to use in your CSS or Javascript.

http://nicewebtype.com/notes/2009/07/19/type-sellers-web-fonts-and-typekit/

Is cost an option? (my font pricing horror story)

I’ve loved Stone Sans Humanist ever since I first saw it used in an MIT Press book (The Second Self by Sherry Turkle, I belive). I loved the way that it flowed on the page and how it looked. I didn’t know any better to know the technical aspects of the font. I only knew I really liked it.

Fast forward 12 years. I’m working on an eBook project and I decided I wanted to use my favorite font in my own project. Not only the font wasn’t available for embedding at the time but the cost to license the font for embedding in an eBook was prohibitive at the time and it was very restrictive.

That is the primary reason why I’ve turned to free/open source fonts for most of my work. I’ve also subscribed to the full Typekit service to make sure that the fonts I want are available for the projects I work on even this will not solve the problem because not all fonts are available for all providers (sadly Stone Sans Humanist is not available through Typekit nor through the vendor’s free font service; you).

Where do I find fonts for embedding?

Below is a partial (and already outdated) list of fonts that are available for embedding. This small list does not include Google Fonts or Typekit (which provides a limited free service)

Where do we find good and free fonts?

The list below include fonts and font collections I’ve used in projects in the past

Practice

How do we add fonts to a web page?

One of the first things we need to realize is that there are multiple fonts for a given type. For most people making a font bold is just a matter of highlighting the text and pressing Command (or Control) + B but for graphic designers and other people who work with type (online and off) that is sacrilege. When you make a font bold you’re actually assigning a bold font to the text.

Font and CSS declarations


@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}

@font-face {
font-family: "Your bold typeface";
src: url("type/filename-bold.eot");
src: local("☺"),
url("type/filename-bold.woff") format("woff"),
url("type/filename-bold.otf") format("opentype"),
url("type/filename-bold.svg#filename-bold") format("svg");

@font-face {
font-family: "Your italic typeface";
src: url("type/filename-ital.eot");
src: local("☺"),
url("type/filename-ital.woff") format("woff"),
url("type/filename-ital.otf") format("opentype"),
url("type/filename-ital.svg#filename-ital") format("svg");
}

h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }
em { font-style: italic; }

See the Pen Example font-face declaractions by Carlos Araya (@caraya) on CodePen.
2039

See Paul Irish’s @fontface gotchas/ for some early pitfalls of @fontface use

The different font formats used above are explained in the following table:

String Font Format Common extensions
“woff” WOFF (Web Open Font Format) .woff
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Typekit

Typekit assigns each user’s kit (one or more fonts packed together) a unique ID that is part of the script yuou are asked to use. The script looks something like this:



See the Pen Typekit font import by Carlos Araya (@caraya) on CodePen.
2039

The code above will only work for a single website, specified on the account where the kit was created from.

Google Fonts

Google Fonts allow you to embed fonts in one of three ways:

HTML Link in the head of your document along with your style sheets and scripts.


See the Pen Google Fonts HTML Link by Carlos Araya (@caraya) on CodePen.
2039

CSS Import from your CSS files.


@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:500,500italic|Exo+2:400,100,400italic);

<

p>See the Pen Google Fonts CSS Import by Carlos Araya (@caraya) on CodePen.
2039

Javascript import from within your scripts.


WebFontConfig = {
google: { families: [ 'Alegreya+Sans+SC:500,500italic:latin', 'Exo+2:400,100,400italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

See the Pen Javascript Google Font Loading by Carlos Araya (@caraya) on CodePen.
2039

One font does not fit all: Formats, details and workarounds

Using the following @font-face declarations we have taken care of the defaults for each @font-face declaration by making the bold and italic fonts actualy be bold and italics and, unless the font is actually condensed or stretched, make it explicit that it’s a normal font, not stretched or compressed (if we need to change this we can do it for specific elements).

Another issue to consider is that not all browsers support the same fonts (surprise, surprise). Internet Explorer supports Embedded Open Type fonts, Firefox prefers WOFF, Chrome, Safari and Opera prefer OTF (Open Type Font) or TTF (True Type Fonts) fonts and iOS prefers SVG (Scalable Vector Graphics) fonts.

I built the @font-face declarations below using Paul Irish Bulletproof @font-face syntax.

The original article is a little dated but it is still the best way to work with @font-face declarations on the web because it preserves the same font across all browsers and devices.

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  font-weight: normal;
  font-style: nomal;
  font-stretch: normal;
}

@font-face {
  font-family: "Your bold typeface";
  src: url("type/filename-bold.eot");
  src: local("☺"),
    url("type/filename-bold.woff") format("woff"),
    url("type/filename-bold.otf") format("opentype"),
    url("type/filename-bold.svg#filename-bold") format("svg");
  font-weight: bold;
  font-style: nomal;
  font-stretch: normal;
}

@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  }

See the Pen Multiple @font-face assignments in a single CSS file by Carlos Araya (@caraya) on CodePen.

We can then fine tune our styles by setting properties for elements and selectors as needed. I usually start with setting up a default font and size/line height that will be carried throughout the document. I also provide a stack of backup fonts so that the browser will use the first font in the stack that is available to display the content, finally dalling back to one of the predefined font families (sans-serif, serif, fantasy, cursive, monospace)


html {
font-family: "Your typeface", Georgia, sans-serif;
font-size: 62.5%;
line-height: 1.5;
}

See the Pen Finetuning elemements with @font-face defined fonts by Carlos Araya (@caraya) on CodePen.
2039

Fighting FOUT

The Flash of Unstyled Text is a phenomenon in Firefox and Opera that few web designers are fond of. When you apply a custom typeface via @font-face, there is a brief moment, when loading the page, where the font hasn’t been downloaded and applied yet, and the next font in the font-family stack is used. This causes a flash of a different (typically less good looking) font, before it gets upgraded.

Unless you’re designing for ancient browsers (Firefox 3.5 and 3.6 and Opera from th at same time period) FOUT shouldn’t be that big an issue anymore.

If you still need to account for that, you can follow the instructions fom Paul Irish

Styles and typographical elements

Italics

Once we have decided on what font stack we will use, we can create our general styles. For example, to create an Italic level 1 heading (<h1>) we could code it like this:


h1.italics {
font-family: "Your italic typeface", Georgia, sans-serif;
font-style: italic;
}

See the Pen Setting up italics fonts for H1 tag using @font-face defined fonts by Carlos Araya (@caraya) on CodePen.
2039

Bold

If we need a bold text for some emphasis we can make our strong tags bolder by using something like:


h1.strong: {
font-weight: 700;
}

See the Pen Assiging bold weight with a @font-face defined font by Carlos Araya (@caraya) on CodePen.
2039

In addition to the standard bold value, CSS allows us to use the value bolder and numerical values from 100 to 700. The differences may be subtle but they are important as seen in the example below:

Comparison between different font weights

See the Pen Comparison between numeric values of the font-weight property by Carlos Araya (@caraya) on CodePen.

The result of the rule above will depend either on available font faces within a font family or weights defined by the browser.

Text-decoration

The text-decoration property has a set of predefined values that we can use deepnding on what visual result we want to accomplish. The valid values are:

  • underline
  • overline
  • line-through
  • none

One additional consideration is that we need to make sure to differentiate the page’s hyperlinks from the content that we choose to underline. Otherwise it’ll be confusing for our users when they try to click on underlined content and nothing happens. See the section on hyperlinks related pseudoclasses for more information.

.underline {text-decoration: underline;}

.overline {text-decoration: overline;}

.strikethrough {text-decoration: line-through;}

.none {text-decoration: none;}

Different types of Underlines using the CSS above

See the Pen Different styles of underline supported with the text-decoration CSS property by Carlos Araya (@caraya) on CodePen.2039

Font-stretch

The font-stretch property, available in CSS3, selects a normal, condensed or expanded face from a font. In order to see the result of the selection, the font being used has to have a face that matches the value given.

The font-stretch property will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes and that is available on the user’s computer or loaded with a @face-font rule.

font-stretch accepts one of the following values:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Example of font-stretch

.expanded {
    font-stretch: expanded;
}

See the Pen Controlling front stretching using CSS by Carlos Araya (@caraya) on CodePen.2039

Font-variant

The font-variant property allows you to change the targeted text to small caps. It is available in CSS2 and CSS3 with the later assigning additional values to the property.

The values available in CSS2 are:

  • normal (the default)
  • small-caps

CSS3 introduced additional values for this property that are dependenant on features from Open Type being available on the font we are using.

  • all-small-caps Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp)
  • petite-caps Enables display of petite capitals (OpenType feature: pcap)
  • all-petite-caps Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap)
  • unicase Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic)
  • titling-caps Enables display of titling capitals (OpenType feature: titl). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

These are small caps

THESE ARE REGULAR CAPS

Other attributes we can work with

kerning and letter-spacing

In typography, kerning (less commonly mortising) is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters.1 In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have similar area.

http://en.wikipedia.org/wiki/Kerning

The font-kerning property is supposed to provide optical kerning for the font being used. It is not widely supported (if at all). I’d suggest using letter-spacing instead. It may not have the same fine grained control Kenrning does but it’s better than nothing.

Letter spacing is more widely supported and allows you to control the spacing between letters in an element or class. Look at the example below.

<style>
p.narrow { letter-spacing: 0.4em }
p.wide {letter-spacing: 1.5em}
</style>

text-align

As the name implies text align controls the horizontal placement of text on the screen. There are 8 possible values, they are:

  • start: The same as left if direction is left-to-right and right if direction is right-to-left.
  • end: The same as right if direction is left-to-right and left if direction is right-to-left.
  • left: The inline contents are aligned to the left edge of the line box.
  • right: The inline contents are aligned to the right edge of the line box.
  • center: The inline contents are centered within the line box.
  • : The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance. This property is not currently supported in any major browser.
  • justify: The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
  • match-parent: Similar to inherit with the difference that the value start and end are calculated according the parent’s direction and are replaced by the adequate left or right value. This is only supported in Chrome.

text-indent

This property indicates hw far you push the first line of text from the starting border (depending on direction of the text). Additional values control whether the indent is a hanging indent and whether it applies to only the first line or the entire block of text.

  • Fixed value (i.e: 2em): Indentation is specified as a fixed value. Negative values are allowed
  • Percentage (i.e: 20%): Indentation is a percentage of the containing block width.
  • each-line: Indentation affects the first line of the block container as well as each line after a forced line break , but does not affect lines after a soft wrap break . Introduced in the CSS3 Text Module and not currently implemented in any major browser.
  • hanging: Inverts which lines are indented. All lines except the first line will be indented. Introduced in the CSS3 Text Module and not currently implemented in any major browser.

color

See Expressing Colors in CSS below

Some typography related pseudo classes

Hyperlink related pseudo classes

Although I wouldn’t recommend it we can make some drastic changes to the way links behave and look when they are clicked or after they are visited. The link seudo classes and what they control are:

  • :link controls the link when it’s not being used (there’s no user interaction)
  • :visited applies after the link has been clicked on
  • :hover applies when the mouse is hovering over the link
  • :active applies when the link is being clicked (the state after you over over the link but before it changes to visited)

<

p>In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

a:link { color: #666666; text-decoration: none; } 
a:visited { color: #333333; } 
a:hover { text-decoration: underline; } 
a:active { color: #000000; }

See the Pen Styling links with CSS by Carlos Araya (@caraya) on CodePen.2039

::first-letter and ::first-line

The ::fisrt-letter pseudo class allows you to style the first letter of a paragraph or a chapter differently than the rest of the content. This is commonly used to create Drop Cap effects. We can limit what paragraphs get a drop cap by using the :first-child pseudo element like in the

div.dcexample p:first-child:first-letter {
  float: left;
  color: #903;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  font-family: Georgia; }

See the Pen Styling First Letter of a Chapter using CSS :first-letter pseudo class by Carlos Araya (@caraya) on CodePen.2039

::first-line does something similar but with the entire first line of the matching element. This matches when printed publiccations some times have a first line of a chapter in a slightly larger font than nthe rest of the text. In the example below we’ve set the text of the first line to 1.3 em.

div.flexample p:first-child:first-line {
  font-size: 1.3em;
  color: #666;
}

See the Pen DbnIk by Carlos Araya (@caraya) on CodePen.2039

Units of measuremet in CSS

CSS Units of Measurement

Expression colors in CSS

Expressing colors in CSS

Regions, Shapes and Exclusions

CSS regions, exclusions, shapes and new publishing paradigms

More stuff to play with: CSS Paged Media

paged media article

Typography doesn’t not replace the designer’s judgment

Links and Resources

Typography Part I: Designing Text on the page

When I first started working on web development I had absolutely no clue as to what typography was or how to make pages ‘look’ visually pleasing, easier to read and more engaging to the user.

Over the years I’ve developed a sensibility to the way text lies on the page, how it relates to the other elements on the page and how to make the text pleasing and easier to read. In more recent times I’ve learned the science to go along with the art along with the tools and resources to make it happen.

Homework to do before starting the research process

  • Read the text you’ll be working with (if possible)
  • What does the text tell you?
    • What is the text about?
  • Make notes of the fonts you look at

Some questions that will guide the research process:

  • Who is our target audience?
    • Demographics
    • Devices / Platforms
  • What kind of content are we creating?
    • One page app
    • website
    • etc
  • What is the purpose of the content we’re creating
    • Kind of content
      • Persuasion
      • Informative
      • Entertainment
      • Other

Getting Started: Research and select your font(s)

There are multiple ways to select what fonts you will use and there are multiple strategies to select the fonts. Some people will tell you to use a single font, some will tell you to use whatever will work best for the project at hand. I subscribe to this last philosophy: If a single font will do the work then by all means use a single font; however if more than one font will work better then mix the fonts as needed.

We can use words as well as images when developing our content. In searching for fonts look for trigger words and moods. What words resonate the strongest when reading or interacting with the text?

As Tim Brown suggests:

“In much the same way as we gather visual inspiration at the outset of our process, we might also begin to consider gathering verbal inspiration when we embark on a project. These verbal palettes or wordboards can help us define a design’s tone and voice and, as we’ll see shortly, are every bit as important as look and feel”.

Tim Brown – Combining Typefaces

There are multiple sources on information when it comes to researching fonts. Designers may not always have the time to do all this but the more you can do the better your design will be for it.

  • Check the publisher’s site for the font
    • What does it tell you?
    • Does it give you the information you need to decide whether the font is good for what you want it for?
      • See what the designer say about the font
      • Subscribe to newsletters like Creative Characters where type designers discuss their work and their inspiration
    • See what other people are saying about the font
    • See how it’s being used in the wild
      • Fonts in Use is a good resource to see how fonts are used in real life situations

Based on the answers and the questions above we can now go ahead and select the anchor font for your document. In my experience this has always been the main body font as it is the one that will appear the most often in your content.

You may have chose to use a single font for your entire project. Most likely you will find one or more additional fonts that will supplement and complement your original font.

The main question to ask about related fonts in how they relate to your primary anchor font. Creating specimens for each font by itself (see the section specimens below for more information about specimens) and creating a sample of your content using the proposed font combinations may give you the answer regarding the usefulness of your font.

Best Practices for Developing Font Stacks

Taken from http://sixrevisions.com/css/css-typography-01/ and expanded with examples and additional information.

All fonts in the same font stack should look similar to each other. Some fonts are wider or taller per letter than others are, giving them larger aspect ratios and the appearance of being different in size.

So, if we put Verdana (mostly Windows) with Helvetica (mostly Macs), we’ve met the above requirements. However, since Verdana is much wider than Helvetica and both fonts are available for both Windows and Macintosh computers, the text will look dramatically different on most Macs compared to most Windows computers. See below for a comparison:

See the Pen Font comparison between Verdana and Helvetica by Carlos Araya (@caraya) on CodePen

So when developing font stacks:

  • Make sure you account for the different operating systems
    • The same font looks slightly different in Windows, Mac, and Linux
  • Be consistent in the type of fonts you use throughout your document
    • Make sure that bold, italics and bold/italic fonts are available for all your selected fonts
  • Make sure the fonts in the stack have similar aspect ratios, both your external fonts (downloaded using @font-face rules) and fonts local to your system
  • Use appropriate generic fonts for the primary fonts you use (see Generic Font Families)

Here is a list of the most common fonts for various aspect ratio types:

  • Wide sans serif: Verdana, Geneva
  • Narrow sans serif: Tahoma, Arial, Helvetica
  • Wide serif: Georgia, Utopia
  • Narrow serif: Times, Times New Roman
  • Monospace: Courier, Courier New, Lucida Console

Generic Font Families

Generic Font Families are a last-resource fallback intended to work when no other font in the chosen stack is available.

According to the Mozilla Documentation Project’s Font Family page:

[blockquote]Generic font families are a fallback mechanism, a means of preserving some of the style sheet author’s intent in case when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the a last alternative in the list of font family names.

serif Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings. E.g. Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif

sans-serif Glyphs have stroke endings that are plain. E.g. ‘Trebuchet MS’, ‘Liberation Sans’, ‘Nimbus Sans L’, sans-serif

monospace All glyphs have the same fixed width. E.g. “DejaVu Sans Mono”, Menlo, Consolas, “Liberation Mono”, Monaco, “Lucida Console”, monospace

cursive Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.

fantasy Fantasy fonts are primarily decorative fonts that contain playful representations of characters.[/blockquote]

Getting started: Building the Rythm

Now that we have our scale, Let’s start with the next obvious question. What impacts a page’s vertical rhythm?

  • Font size
  • Line Height
  • Margins
  • Paddings

In order to achieve a good rhythm we have to calculate these three factors and apply them in our CSS. Here is an example of text without a good rhythm.

For the first image below, we have only set up a default font size:

Text without vertical rhythm

As you can see, the rhythm is off. After the first line the baseline does not remain constant. The further down you go in the paragraph the harder it gets and, consciously or not, reading the text gets harder.

Before we can start working on the rhythm we need to pick a time signature, or base font-size to calculate our rhythm from. For this essay, and for most of my work, I’ve selected 16px to make things easier to do the math. A line height of 1.25 x the base font size is a great place to start, based on the font face and size.

The starting CSS will have set the body font-size: 16px and line-height: 1.25 (without a unit). We’ll build from there.

The CSS looks like below:

See the Pen Base CSS for typography examples by Carlos Araya (@caraya) on CodePen

The text now looks like this:

Text in vertical rhythm

Rhythm on a page

Based on thoughts and ideas from http://blog.8thlight.com/chris-peak/2012/12/30/vertical-rhythm.html, http://blog.8thlight.com/billy-whited/2011/10/28/r-a-ela-tional-design.html and http://nicewebtype.com/notes/responsive-typography/

Vertical Rhythm is simply when a body of text is aligned to evenly spaced horizontal lines (think of your lined paper from grade school), making it more cohesive and easier to read.

Compare the following two sections:

See the Pen Example of text without explicit line height by Carlos Araya (@caraya) on CodePen

See the Pen Example of text without explicit line height by Carlos Araya (@caraya) on CodePen

Which ones is easier to read and “flows” better?

We will look at what makes text flow with good rhythm, explore the typographical elements that make the flow and rhythm happen and, in the next part, we will build the SCSS, CSS and HTML elements that we need to flow our text successfully.

Rhythm and modular scales

What’s a Modular Scale?

Robert Bringhurst defines this approach to typography is all about:

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

Robert Bringhurst – The Elements of Typographic Style

Tim Brown further clarifies:

A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using the golden ratio, for example, we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arrive at the next number down.

Tim Brown – More Modern Typography

It’s fairly easy but until I started looking more systematically at what typography it wasn’t something that even crossed my mind. Yet it is one of the keys to making typography work online and use type as the basis of our online decisions.

Why use a Modular Scale

As Tim Brown suggests:

Recognizing type as the atomic element in web design affords us the opportunity to make better design decisions that resonate upward and outward into the experience. But it also challenges us to eschew conventions like the use of prefabricated frameworks and reusable templates, and to accept a new balance in our schedules—that we put forth greater investment and effort for the sake of more meaningful typography.

Tim Brown – More Meaningful Typography

The modular scale: What I like working with

Before we get started with defining what our rhythm will look like let’s define the scale that we’ll use to create the rhythm. Unless I have a major design reason I always prefer to use 16 pixels as my default font size. It works as it is the default font sizes for most UAs

I picked 24 as my second value to apply to my modular scale generator and the Golden Ratio (1: 1.618) to build my scale. From what I’ve learned the second value is not as important but a secondary reference.

There is a a lot of information about the Golden Ratio as it applies to typography. For general information look at: http://en.wikipedia.org/wiki/Golden_ratio

I built my 16/24 golden ratio scale using Tim Brown’s Modular Scale Generator. Clicking the link below will take you to the generated scale, which you can use on your own projects or modify as needed:

http://modularscale.com/scale/?px1=16&px2=24&ra1=1.618&ra2=0

The advantage of using a scale like the one is that the values are already precalculated for you and most of the values are similar across the columns. This makes our calculations easier

Getting started: Test your theories on a practice page

We have talked a lot about theory; now let’s start putting the theory into practice. We’ll start with creating web specimens that just test the font, we’ll then create additional specimens based on our content and see if the font still holds. We’ll then test our specimens and content on multiple devices (you’ll be surprised at how different the same font looks in different browsers and operating systems and even in different browsers running on your same computer)

Specimens

The web font specimen, discussed in this A List Apart article and available from http://webfontspecimen.com/ allows you to create a professional font specimen of a font of your choice.

As your work with typefaces continues to grow, you’ll find that you have a large list of specimens available. Don’t delete them; put them somewhere on your testing web server (whether it’s hosted online or living in your laptop) as a reference material for future projects.

Please do not reinvent the wheel.

The Frontfriend bookmarklet let you play with fonts without having to customize the page for every single font that you want to test. Using the web font speciment we discussed above we can test fonts without having a page using the actual fonts. We can test with Google web fonts and with our own local fonts.

Samples of your content using the proposed fonts

Take the fonts you’ve chosen and build a portion of your website using them. This will give you one final opportunity to check the fonts in the layout and flow you’ve developed so far… if it doesn’t work then this is a good point to look at alternatives.

Example of a font specimen page

Test on multiple devices

Now that we have specimens and our content built with the fonts we’ve chosen, we test… we test… and we test again and we test in as many devices as we can get our hands on to, either virtual (using tools such as Type Rendering or in actual devices.

In the article Test on real mobile devices without breaking the bank Brad Frost discusses what should be the minimal setup that we need to test in mobile devices in addition to the standard set of browser/operating system combinations for desktop browsers.

It sounds like a lot but it’s a good view of what devices we need to test in but will also depend on your target devices and technologies. Even within the same family of devices, Android for example, look very different depending on the version so we need to test in appropriate devices and versions of the browsers we’ve selected.

Next Steps

Now that we have decided on our fonts, our scale and complementary fonts, if any, we are ready to move into CSS action. We’ll look at building our font stacks, and the different elements of building our typography for the web.

Feedback is always appreciated and encouraged. If you have any suggestions, please leave a comment below or via twitter (@elrond25)

CSS regions, exclusions, shapes and new publishing paradigms

Introduction

Smashing Magazine Newspaper Designs article shows examples of what printed media can do. Having learned to use InDesign for ePub-based ebooks I’ve come to respect the power and flexibility of printed media… working primarily in web environments I’ve always wondered what it would take to do similar layouts.

Over the last year at the two HTML5 Developer Conferences I’ve heard more and more about new CSS technologies that would make print-like layouts possible:Regions, Shapes and Exclusions.

Adobe has been championing these technologies, not surprising since they also create DTP and Layout programs.

While these technologies (Exclusions, Shapes and Regions) are still experimental and supported by a limited number of browsers, it is still an exciting possibility for designers and developers. We can match print layouts (almost) in our web content.

Supported browsers

These technologies are still experimental and subject to change. Best place to keep up to date with the development of these CSS specs is the W3C site. Adobe may also have updated articles and tutorials.

The following browser supports the standard:

  • IE, IE Mobile (-ms- flag)
  • Webkit nightly (-webkit-flag)
  • iOS (-webkit- flag)
  • Fully supported on iOS 7
  • Chrome Canary
    • Enable with Enable CSS Regions flag
    • For Chrome 23 and later enable with: Enable experimental WebKit features)
    • Latest Chrome Nightly uses Enable Experimental Web Platform Features to enable regions

Can we use this for publishing projects now?

While the technology is available and work to reach full recommendation status continues on the W3C’s CSS working group we can still play with the technology and crete prototypes.

It may be a while, if ever, before ebook readers’ rendering engines catch up wit the standard but let’s remember that we can build web applications that will run on both Kindle Fire and iOS devices. These applications can use polyfills to accomplish the same or similar functionality using something like Modernizr.load or similar loader libraries. How to do polyfill work will be explained later.

Regions

Regions allow you to create flows of content inside your web content.

For those familiar with InDesign think of regions as threaded text frames that can then be laid out and changed as needed without having to change the layout of all spreads just to make one change.

For those not familiar with InDesign, regions and flows look something like this:

Getting Started

In supported browsers the code for something like the example above is fairly simple. Code First, explanation later

CSS code:


#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
}

.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
  height:300px;
  border: 1px solid #f00
}

The #source element creates the flow for our regions. This text will disappear from the regular flow of text and will be placed in our regions.

Every container with the class .region will be used to flow the text into. We can position the regions any way we want and use other CSS tools such as flexible boxes layouts, animations and transitions to place our content.

Combining the HTML below:

<div id="source">Some long chunk of text goes here</div>

<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>

with the CSS that we looked at earlier will produce a result like the one in the Codepen below:

See the Pen CSS Regions Example #1 by Carlos Araya (@caraya) on CodePen

One thing to notice is that the #source disappears from the flow of your page’s content and only appears once, on our regions. This will be interesting later when we start working with multiple flows in the same layout.

Moving the regions around

We have our basic regions layout… it’s nothing to write home about, is it? Let’s do something about it.

We will change the regions on our HTML to add an ID attribute to each. Our HTML code now looks like this:


<h1>Positioned Regions</h1>

<p>Each of the 4 regions (marked with a 1px red border) below has been positioned using CSS attributes (top and left)</p>

<div id="reflowing-content">
  <div class="region" id='region1'></div>
  <div class="region" id='region2'></div>
  <div class="region" id='region3'></div>
  <div class="region" id='region4'></div>
</div>

<div id="source">Some long chunk of text goes here</div>

I have added a wrapper div to the regions called reflowing-content. This allowed me to use absolute positioning on the regions inside.

I also added individual ID attributes to each region so we can style them independent from each other. In the first version of our code, all regions got the same style… simple but not really useful.

Now that we’ve identified each region on our content we will play with style. We will change the size of the region and play with their positions.


#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
}

#reflowing-content {
  position: absolute;
}
.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
  position:absolute;
  width: 300px;
    height: 400px;
  border: 1px solid red;
}

#region1 {
    left: 10px;
}

#region2 {
  left: 320px;
}

#region3 {
  top: 420px;
    left: 10px;
}

#region4 {
    top: 420px;
    left: 320px;
}

The resulting modifications produce the result below:

See the Pen CSS Regions Example2: Positioned flow by Carlos Araya (@caraya) on CodePen

Making it more flexible

Now we get to what, for me, is one of the hardest parts of working with CSS across browsers and sometimes even within versions of a browser: relative positioning. Whenever I get confused or need a refresher for the different positioning values and the resulting layout, I go to CSS Positioning 101, a 2010 article in A List Apart that still helps me make sense of the mess in the positioning game (or my head, haven’t quite decided where the problem really lies).

The example in the previous section uses absolute positioning to layout the content. It works but it lacks flexibility or responsiveness

So we’ll change the CSS to make the code more responsive while keeping the HTML the same. The new CSS looks like the one below:

html, body {
  width: 100%;  
}

#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
    flow-into: main-content;
}

.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
    flow-from: main-content;
  position:relative;
  width: 300px;
    height: 400px;
  border: 1px solid red;
}

#region1, #region3 {
    left: 10px;
}

#region2, #region4 {
  left: 320px;
}

Changing the regions’ positioning to relative allows us more flexibility. While we can keep the order of the elements, we can now position them anywhere in the screen we want. In developing the example below I also played with negative values for the top element to move content up from its original position.

See the Pen CSS Regions Example3: Positioned flow with relative elements by Carlos Araya (@caraya) on CodePen.

Will this work with older browsers?

As mentioned earlier, the technology is still experimental and supported wither through css vendor prefixes (Webkit and Microsoft) or behind a flag (Chrome Canary and, I believe, release).

So how do we make it work?

This is where polyfills and resource loaders come into play. While no browser supports regions out of the box, Adobe has provided a polyfill for regions that levels the playing field while the technology is in development.

Modernizr.load (also know as yepnope.js) allows you to conditionally load javascript based on Modernizr tests. The example below makes sure we supports both columns, shapes and regions before we do anything:

Modernizr.load([
  {
    // List of things we need
    test : 
            Modernizr.regions 
            && Modernizr.shapes 
            && Modernizr.columns,
    // Modernizr.load loads css and javascript as needed
    nope : ['css-regions-polyfill.js', 'css-regions-polyfill.css']
  }
]);

In the code above we test to see if the browser supports regions, shapes and columns. If it does then we do nothing, everything is good, we have a cool browser and we move on.

For browsers who do not support the technologies we are using, we load a JavaScript polyfill and the corresponding CSS file; while older browsers will not have the exact same experience as newer browsers, they will get enough of the experience for it to work.

Adobe has created a CSS regions polyfill as a research platform while the standard is finalized. The polyfill introduces the -adobe prefix as a way to avoid collisions with other vendor prefixes and the un-prefixed recommendation.

Final Example

We will take one of our example images from the top newspapers and convert it into a fluid web layout that uses regions and shapes to layout multiple flows of content in the same page.

dmn7

I know that you can do some of the same things that you use regions for. It is true that the CSS uses a combination of flexbox and regions. The looks of the example are a limitation of my skills with CSS and not necessarily a reflection of the recomendations and their implementations.

I will continue working on this final example in Codepen. Comments and feedback asked for and encouraged.

See the Pen apnou by Carlos Araya (@caraya) on CodePen

Outstanding Issues and Questions

As seen in the examples above, learning how to work with regions can be a big challenge but it’s one that I think it’s going to be worth it in the long run; that said there are still some questions I haven’t been able to figure out and that I’m throwing out there for comments and possible solutions 🙂

  1. How do you deal with scroll overflow?

Shapes

The CSS shapes recommendations are like Drop Caps or floated images on steroids.

For the unintiated drop caps are the large letters used in the first paragraph of a chapter or a page. The CSS code for a drop cap may look something like this:

p:first-child:first-letter { 
    float: left; 
    color: #903; 
    font-size: 75px; 
    line-height: 60px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia; 
}

The code above will take the first letter (using the first letter pseudo class) of the first paragraph child (using the first-child pseudo class) and apply the style above.

Why use them

Even when we use the float CSS property we can’t float content fully around an image; you can only float the text to one side of the image and, as far as I know, you are limited to floating block objects.

Shapes give you control of the shape (duh) that the content is floated.

Furthermore, shapes allow to float text both inside and outside the shape you’ve defined. Once again we get close to professional print layouts for our web content.

Supported browsers

Support for shapes is in a much larger flux than regions as no single browser supports the complete recommendation. That said Adobe maintains an up to date compatibility table for the different shape attributes.

How to use shapes?

The simplest example is to use them alongside floated content. In the example below we’ve taken the Dunetocat image from Github and floated it both left and right and used CSS shapes and float attributes.

<div id="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus   vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. </div>
#container{
  border: 1px solid blue;
}

.float-left {
  float: left;
  shape-outside: rectangle(0, 0, 100%, 100%, 60%, 50%);
}

.float-right {
  float: right;
  shape-outside: rectangle(0, 0, 100%, 100%, 40%, 50%);
}

In the codepen below notice the way in which the text wraps around the text around the image and how it is wrapped differently depending on where the object is placed. You can play with the values for the rectangle shape-outside CSS property to see how the wrapping changes.

See the Pen Shape example 2: Shape Inside by Carlos Araya (@caraya) on CodePen

The next easiest example is to use shape inside to put our text inside a shape. We are flowing the content using regions like we did above and then shape the area we are flowing our content to and use the CSS shape-inside property to define the shape we are flowing our content into… in this case a circle.

<div id="region1"></div>

<div id="content" align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Nulla rutrum bibendum mauris et porttitor. Donec luctus, ante vitae tincidunt ultricies, mi leo ultrices lacus, ac elementum urna metus in lorem. Suspendisse non feugiat risus. Nullam congue a est nec consequat. Aliquam gravida sem sit amet tellus vulputate sollicitudin. Cras feugiat est et turpis scelerisque auctor.
<div>
#content {
  flow-into: flow;
  font-size: 11pt;
  hyphens: auto;
}
#region1 {
  flow-from: flow;
  width: 200px;
  height: 200px;
  background-color: #9BBCE3;
  shape-inside: circle(50%, 50%, 50%);

As usual you can play with the CSS definitions on the Codepen below to test what would happen if you make changes in the shape you’re flowing your content into.

See the Pen Shape example 2: Shape Inside by Carlos Araya (@caraya) on CodePen

Getting fancy

There are areas of the regions specification that I will touch on briefly because they are just the “nitpicky” aspects or regions. To check if a property is support in any of the supported browsers (if it’s supported at all) check Adobe’s shapes support matrix

If the browser supports the techniques they are cool to play with and, when they work, they lend a more precise and professional look to our web content.

Defining Complex Shapes

Defining anything beyond simple circles and rectangles is a pain in the butt, isn’t it? Wouldn’t it be nice to have a visual tool available to help us plot all the points on the image? Adobe’s Bear Travis, has made available a collection of tools that can help you when working with complex CSS shapes. The tools are hosted on github at<http://betravis.github.io/shape-tools”> and they are very useful unless you want to learn how to calculate shapes on your own.

Exclusions

Exclusions are a complement to shapes that will tell the browser engine how to float the content. and will let you exercise a much finer level of control regarding how the content is floated.

What they are

Exclusions allow you to float arbitrarily shaped objects using values created using CSS shapes and attach additional properties that will allow you to float the content in different ways.

Exclusions are expressed using CSS attributes wrap-around and wrap-through.

Browser support

Surprisingly, at least for me, exclusions are only supported on IE 10+ (I imagine IE 11 will support them too). If in doubt, please test with Chrome Canary, WebKit Nightly and IE10 or IE11 Developer’s preview.

How to use them

The first example we’ll look at is text wrapping around a straight image. We will use the same code that we used on our first shape example and modify it slightly:

Big Example Title


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus

This is a test

    <p>This is a major quote for this document and we'll have to offset it from the rest of the text</p>
  </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus

With the following CSS:

#container {
  position: relative;
  padding: 20px;
  border: 1px solid red;
  width: 90%;
  text-align: justify;
  column-count: 2;
}

.excluded {
background: #0ff;
opacity: 0.6;
padding: 10px;
width: 150px;
height: 150px;
left: 45%;
position: absolute;
shape-outside: rectangle(0, 0, 100%, 100%);
float:left;
wrap-flow: both;
}

Currently the example above Only works in IE 10 using the -ms vendor prefix

The final example

Larger and more complex example, including both regions and shapes is forthcoming