<?xml version="1.0"?>
<?xml-stylesheet href="/transform" type="text/xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:bibo="http://purl.org/ontology/bibo/" xmlns:bs="http://purl.org/ontology/bibo/status/" xmlns:ci="https://vocab.methodandstructure.com/content-inventory#" xmlns:dct="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" lang="en" prefix="bibo: http://purl.org/ontology/bibo/ bs: http://purl.org/ontology/bibo/status/ ci: https://vocab.methodandstructure.com/content-inventory# dct: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns# xhv: http://www.w3.org/1999/xhtml/vocab# xsd: http://www.w3.org/2001/XMLSchema#" vocab="http://www.w3.org/1999/xhtml/vocab#" xml:lang="en">
  <head>
    <title property="dct:title">Designing a Relative Layout</title>
    <base href="https://doriantaylor.com/style-guide/designing-a-relative-layout"/>
    <link href="../document-stats#Ec9U67QaKWVmrfztbskyvJ" rev="ci:document"/>
    <link href="../elsewhere" rel="alternate bookmark" title="Elsewhere"/>
    <link href="../this-site" rel="alternate index" title="This Site"/>
    <link href="http://purl.org/ontology/bibo/status/published" rel="bibo:status"/>
    <link href="" rel="ci:canonical" title="Designing a Relative Layout"/>
    <link href="../lexicon/#ElJLHYiYysLxSpAqBYD7JJ" rel="dct:audience" title="Visual Designer"/>
    <link href="../person/dorian-taylor#me" rel="dct:creator" title="Dorian Taylor"/>
    <link href="typesetting-best-practices" rel="dct:references next" title="Typesetting Best Practices"/>
    <link href="../whats-up-with-the-layout" rel="dct:references up" title="What's Up with the Layout?"/>
    <link href="../lexicon/#EnewYu-MeZVXNc97q_-jAI" rel="dct:subject" title="Web Development"/>
    <link href="../person/dorian-taylor" rel="meta" title="Who I Am"/>
    <link about="../" href="../3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="../" href="../f07f5044-01bc-472d-9079-9b07771b731c" rel="alternate" type="application/atom+xml"/>
    <link about="../" href="../this-site" rel="alternate"/>
    <link about="../" href="../elsewhere" rel="alternate"/>
    <link about="../" href="../e341ca62-0387-4cea-b69a-cdabc7656871" rel="alternate" type="application/atom+xml"/>
    <link about="../verso/" href="../3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="../verso/" href="../this-site" rel="alternate"/>
    <link about="../verso/" href="../elsewhere" rel="alternate"/>
    <meta content="designing-a-relative-layout" datatype="xsd:token" property="ci:canonical-slug"/>
    <meta content="Back in 2008, I was puzzling out how to do a relative page layout &#xE0; la Robert Bringhurst, but didn't appear to return to write down what I came up with." name="description" property="dct:abstract"/>
    <meta content="2008-06-19T05:25:04+00:00" datatype="xsd:dateTime" property="dct:created"/>
    <meta content="designing-a-relative-layout" property="dct:identifier"/>
    <meta content="2008-09-01T19:09:52+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2008-09-03T00:08:22+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2008-10-08T22:13:21+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2008-10-09T02:02:01+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2009-03-04T00:43:00+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2022-05-31T04:18:52+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta about="../person/dorian-taylor#me" content="Dorian Taylor" name="author" property="foaf:name"/>
    <meta content="summary" name="twitter:card"/>
    <meta content="@doriantaylor" name="twitter:site"/>
    <meta content="Designing a Relative Layout" name="twitter:title"/>
    <meta content="Back in 2008, I was puzzling out how to do a relative page layout &#xE0; la Robert Bringhurst, but didn't appear to return to write down what I came up with." name="twitter:description"/>
    <object>
      <nav>
        <ul>
          <li>
            <a href="typesetting-best-practices" rev="dct:references" typeof="bibo:Report">
              <span property="dct:title">Typesetting Best Practices</span>
            </a>
          </li>
          <li>
            <a href="../whats-up-with-the-layout" rev="dct:references" typeof="bibo:Note">
              <span property="dct:title">What's Up with the Layout?</span>
            </a>
          </li>
          <li>
            <a href="../document-stats#Ec9U67QaKWVmrfztbskyvJ" rev="ci:document" typeof="qb:Observation">
              <span>urn:uuid:73d53aed-068a-4595-99ab-7f3b5bb24caf</span>
            </a>
          </li>
        </ul>
      </nav>
    </object>
  </head>
  <body about="" id="EVHFFN2VF_jj6S1nbqbzTI" typeof="bibo:Note">
    <p>One of my <a href="../design-goals" title="Design Goals of doriantaylor.com" rel="dct:references">eventual goals</a> is <a href="../ubiquitous-accessibility" rel="dct:references" title="Ubiquitous Accessibility in Web-Based Products">ubiquitous accessibility</a> &#x2014; that this site ought to work in <strong>all</strong> browsers. As such, the <em>pixel-perfect</em> designs of yesteryear are simply not going to cut it for the wide variety of devices that will be reading <abbr title="World Wide Web">Web</abbr> pages now or in the near future.</p>
    <p>The default unit I am using is the <a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" title="Syntax and basic data types &#x2014; Cascading Style Sheets Level 2 Revision 1" rel="dct:references">ex</a>, which is equivalent to the <a href="http://en.wikipedia.org/wiki/X-height" title="X-height &#x2014; Wikipedia" rel="dct:references">x-height</a> of the base viewport font. Therefore, when you change the font size in the browser, the entire layout changes as well &#x2014; including images. For those, I plan to set up an output filter which resamples them on the fly, or serves up a cached copy. A simple JavaScript will take care of fetching the replacements. Image boxes, naturally, are sized by <acronym title="Cascading Style Sheets">CSS</acronym>.</p>
    
  </body>
</html>
