Commit 8a679ab8 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Correct timestamp on CSS post. Add Labs blog post for Dynamic Type Support

parent 51d71aa6
......@@ -54,7 +54,7 @@
<div class='main h-entry'>
<h1 class='p-name long-title'>Better Styles Through&nbsp;ems</h1>
<p class='post-date dt-published' datetime='2015-11-29 11:55:00'>29th November, 2016 — <span class='p-author'>Laura Kalbag</span></p>
<p class='post-date dt-published' datetime='2016-11-29 11:55:00'>29th November, 2016 — <span class='p-author'>Laura Kalbag</span></p>
<div class='e-content'>
<p>CSS is vital to <a href="">Better</a>. The Better apps (<a href="">iOS</a> and <a href="">Mac</a>) are native apps that use web pages for their content. They’re the same pages you see on the <a href="">Better site</a>, but with specialised templates. Still, the content you see on the apps is largely HTML and CSS.</p>
<!DOCTYPE html>
<html lang='en'>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1' />
<title> Labs - Blog - Adding iOS Dynamic Type Support to Better</title>
<!--[if lte IE 8]>
<script src=''></script>
<link rel='shortcut icon' href='/favicon.ico'>
<link rel='apple-touch-icon' href=''>
<link rel='apple-touch-icon' sizes='76x76' href=''>
<link rel='apple-touch-icon' sizes='120x120' href=''>
<link rel='apple-touch-icon' sizes='152x152' href=''>
<link rel='apple-touch-icon' sizes='152x152' href=''>
<link rel='alternate' type='application/rss+xml' title=' Labs Blog' href='' />
<link rel='stylesheet' href=''/>
<link rel="stylesheet" href="../css/highlight/kimbie.dark.css">
<link rel='stylesheet' href='../css/styles.css'/>
<script src="../js/highlight.pack.js"></script>
<body class='labs labs-blog'>
<nav class="site-navigation">
<ul class="site-navigation--list">
<li class="home-link">
<a href="">Home</a>
<li class="about-link">
<a href="">About</a>
<li class="labs-link">
<a href="">Labs</a>
<li class="forum-link">
<a href="">Forum</a>
<li class="videos-link">
<a href="">Videos</a>
<li class="news-link">
<a href="">News</a>
<li class="fund-link">
<a href="">Fund</a>
<nav class='sub-navigation labs-navigation'>
<ul class='sub-navigation--list'>
<li class='projects-link'><a href='../../'>Projects</a></li>
<li class='blog-link'><a href='../'>Blog</a></li>
<div class='main h-entry'>
<h1 class='p-name long-title'>Adding iOS Dynamic Type Support to Better</h1>
<p class='post-date dt-published' datetime='2016-12-15 16:55:00'>15th December, 2016 — <span class='p-author'>Laura Kalbag</span></p>
<div class='e-content'>
<p>When <a href="">Nivi pointed out on Twitter that Better didn’t have Dynamic Type support</a>, it went to the top of my fix list.</p>
<p>“Just downloaded @betterbyindie. Would be great if it supported Dynamic Type so I can read updates inside the app #accessibility #a11y”</p>
<p>Dynamic Type is pretty cool. You can go to Settings > General > Accessibility > Larger Text on your phone, and either grow or shrink your preferred reading size. Apple will then apply this reading size to every Dynamic Type-supported element across iOS. It’s a little bit like the default or minimum font size setting in a web browser.</p>
<p>What’s even cooler is that Dynamic Type also works in Safari on iOS.</p>
<p>As I’ve mentioned before, Better’s interface is mostly web views. They’re local to the device, but they’re HTML and CSS like you’d find on any web page. So Dynamic Text support needed to be added to the CSS. As we have a few specific CSS rules for the app, I could have just added the Dynamic Type support there. But Dynamic Type also works in Safari, I thought it was worth making it work on the <a href="">Better site</a> as well.</p>
<p>Sidenote: I’m not a huge fan of <a href="">using proprietary CSS unless it’s for implementing prefixed future standards</a>. But Dynamic Type is an important feature, and integral to Better’s overall accessibility.</a>
<p>Reading up on what <a href="">little “official” information there is</a> about <a href="">implementing Dynamic Text on the web</a>, it looked to be fairly straight-forward to implement:</p>
<pre><code>font: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
font: -apple-system-caption2
font: -apple-system-footnote
font: -apple-system-short-body
font: -apple-system-short-headline
font: -apple-system-short-subheadline
font: -apple-system-short-caption1
font: -apple-system-short-footnote
font: -apple-system-tall-body</code></pre>
<p>But there are some caveats. Firstly, you need to understand what <code>-apple-system-etc</code> does. It effectively sets the following:</p>
<pre><code>font-family: (system font);
font-size: (Dynamic Type size)
font-style: normal;
font-weight: (bold for -headlines, normal for -body,-caption,-footnote)
font-variant: normal;</code></pre>
<p>You can see the Dynamic Type defaults in action if you <a href="">visit this sample page on iOS Safari</a>. (See screenshot below)</p>
<img src="" alt="Sample list of Dynamic Type type choices in iOS">
<p>Notice that headlines are small and body text is big.</p>
<p>How you then add Dynamic Type depends on how you want to implement it on your page. For Better I decided:</p>
<li>Use the default Dynamic Type size for every text element</li>
<li>Don’t apply Dynamic Type to the root. <a href="/labs/blog/better-css-overhaul/">We use em units</a>, so setting Dynamic Type on the root the layout would resize every unit in the layout, and break a lot of elements with fiddly layouts</li>
<li>Keep our own font families, so we still have the Better look-and-feel</li>
<li>Allow Dynamic Type to override the chosen font-styles, font-weights and font-variants, for consistency with other apps that support Dynamic Type</li>
<p>If you use proprietary prefixes a lot, then you probably use them like this:</p>
<figure><pre><code>display: -webkit-box; /* make flexbox work for old webkit implementations */
display: -webkit-flex; /* make flexbox work for newer webkit implementations */
display: -ms-flexbox; /* make flexbox work for Internet Explorer */
display: flex; /* make flexbox work for all browsers that support the standard implementation of flexbox */</code></pre>
<figcaption><p>You use the standard, non-prefixed, property last, because that will override the previous rules if it is also supported.</p></figcaption>
<p>But that doesn’t work with Dynamic Type because the proprietary bit is the value, not the property.</p>
<pre><code>p {
font: -apple-system-body;
font-family: Avenir, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
<p>As the -apple-system-body rule uses the <a href="">font property shorthand</a> this would result in the Dynamic Type being overridden by the following font-family, font-weight, and font-size rules. For Better, I wanted to keep the original font-family and font-weight, but not override the font-size as that would defeat the point of adding support for Dynamic Type.</p>
<p>The trick is to do the following:</p>
<pre><code>p {
font-size: 1em; /* sets font size for all browsers */
font: -apple-system-body; /* set Dynamic Type, overriding font size for iOS */
font-family: Avenir, Helvetica, sans-serif; /* set font family for all browsers, overriding Dynamic Type */
font-weight: normal; /* set font weight for all browsers, overriding Dynamic Type */
<p>This works well for Better’s CSS as we mostly set the font-sizes on the base elements (h1, h2 etc) and let the cascade do the rest. However, it does get a little trickier if you set font-sizes on classes and other more-specific selectors. You’ll need to repeat the same rule again:</p>
<pre><code>body.spotlight .feature
font-size: 1.1em; /* special font size for this feature */
font: -apple-system-body; /* set Dynamic Type again */
font-family: Avenir, Helvetica, sans-serif; /* override the Dynamic Type font family again */
word-wrap: break-word;
<p>Needless to say, if your CSS is simple and relies on the cascade, adding Dynamic Type is much easier.</p>
<p>If you’re having trouble with long words or URLs overflowing your layouts when the Dynamic Type is set to very large, it’s worth reading <a href="">Chris Coyier on CSS for Handling Long Words and URLs</a>.</p>
<div id="discourse-comments"></div>
<!-- footer -->
<aside class='fund-us'>
<h2>We need your support</h2>
<p><a href='/about'>We won’t take venture capital</a>. We need your individual support to help us <a href=''>until we reach sustainability</a>.</p>
<a class='button' href=''>Fund us</a>
<footer class='site-footer'>
<div class='footer-wrap'>
<aside class='ethical-design-badge'>
<a href=''><img alt='' src=''></a>
<p>We practice <strong>Ethical</strong> Design.</p>
<small class='copyright'><strong></strong> <abbr title='Copyright'>©</abbr> <a href='/about/#trademarks'>Article 12</a>. All content is <a href=''>Creative Commons Attribution 4.0 International</a>, unless otherwise stated. <a class='view-source' href=''>View source</a></small>
<script type='text/javascript'>
var discourseUrl = '',
discourseEmbedUrl = '';
(function() {
var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
d.src = discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment