liddiard · March 7, 2020 03:40
diff --git a/instagram_text_layout.html b/instagram_text_layout.html
 <!doctype html>
 <html lang="en"> <!-- necessary to define language here to get English hyphenation -->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            :root {
                --article-padding: 1.5em;
            }
            html {
                box-sizing: border-box;
            }
            *, *:before, *:after {
                box-sizing: inherit;
            }
            body {
                font-family: Helvetica, Arial, sans-serif;
                border: 0;
                margin: 0;
                padding: 0;
            }
            article {
                width: 1080px;
                height: 1080px;
                columns: 2;
                column-gap: 1.5em;
                padding: var(--article-padding);
                font-family: Baskerville; /* note: Mac-only font */
                font-size: 2.1em; /* adjust as necessary to fit text */
                line-height: 1.35;
                letter-spacing: normal;
                text-rendering: optimizeLegibility; /* render more ligatures */
                text-align: justify;
                hyphens: auto;
                position: relative;
                color: #222;
            }
            article p:first-child {
                margin-top: 0;
            }
            .page-number {
                position: absolute;
                right: 0; 
                bottom: 0;
                margin: var(--article-padding);
            }
        </style>
    </head>
    <body>
        <!-- Text copyright Patricia Kelly Yeo -->
        <article>
            <p>(We went to the Philippines every summer, and my parents referred to Chinese people as “the Chinese”–i.e. not us. Cut me a break.)</p>
            <p>Thus, I am not quite an outsider looking in, but my knowledge is rote-learned, handed off by my parents, keen as ever to erase the browner aspects of our family history. Via restaurants, they introduced me to my own Chineseness: chilled seaweed salads served on blue and white floral printed plastic plates and scalding hot jasmine tea in stainless steel teapots. Then, a tiny pure gold necklace with my zodiac sign, the pig. Later, an impossibly patient Mandarin tutor–I was hopeless at the tones. I am still hopeless.</p>
            <p>These days, try as I might to pretend otherwise, my discernment in the matters of Chinese food shows through, the n-plus meals I’ve had at Chinese restaurants supplemented by years of reading food publications that have turned their sights on region-specific Chinese cuisine. It is this experience I draw upon as I first enter Woon, eager for a pork belly-filled gua bao after a trip to Taipei last spring. I came in with high hopes.</p>
            <p>I left with them mostly fulfilled.</p>
            <p>For the seasoned Chinese restaurant patron: Yes, they have the blue and white floral plates, the teapot too–with food to match.</p>
            <span class="page-number">(2/4)</span>
        </article>
    </body>
 </html>
	<!doctype html>
	<html lang="en"> <!-- necessary to define language here to get English hyphenation -->
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	:root {
	--article-padding: 1.5em;
	}
	html {
	box-sizing: border-box;
	}
	, :before, *:after {
	box-sizing: inherit;
	}
	body {
	font-family: Helvetica, Arial, sans-serif;
	border: 0;
	margin: 0;
	padding: 0;
	}
	article {
	width: 1080px;
	height: 1080px;
	columns: 2;
	column-gap: 1.5em;
	padding: var(--article-padding);
	font-family: Baskerville; /* note: Mac-only font */
	font-size: 2.1em; /* adjust as necessary to fit text */
	line-height: 1.35;
	letter-spacing: normal;
	text-rendering: optimizeLegibility; /* render more ligatures */
	text-align: justify;
	hyphens: auto;
	position: relative;
	color: #222;
	}
	article p:first-child {
	margin-top: 0;
	}
	.page-number {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: var(--article-padding);
	}
	</style>
	</head>
	<body>
	<!-- Text copyright Patricia Kelly Yeo -->
	<article>
	<p>(We went to the Philippines every summer, and my parents referred to Chinese people as “the Chinese”–i.e. not us. Cut me a break.)</p>
	<p>Thus, I am not quite an outsider looking in, but my knowledge is rote-learned, handed off by my parents, keen as ever to erase the browner aspects of our family history. Via restaurants, they introduced me to my own Chineseness: chilled seaweed salads served on blue and white floral printed plastic plates and scalding hot jasmine tea in stainless steel teapots. Then, a tiny pure gold necklace with my zodiac sign, the pig. Later, an impossibly patient Mandarin tutor–I was hopeless at the tones. I am still hopeless.</p>
	<p>These days, try as I might to pretend otherwise, my discernment in the matters of Chinese food shows through, the n-plus meals I’ve had at Chinese restaurants supplemented by years of reading food publications that have turned their sights on region-specific Chinese cuisine. It is this experience I draw upon as I first enter Woon, eager for a pork belly-filled gua bao after a trip to Taipei last spring. I came in with high hopes.</p>
	<p>I left with them mostly fulfilled.</p>
	<p>For the seasoned Chinese restaurant patron: Yes, they have the blue and white floral plates, the teapot too–with food to match.</p>
	<span class="page-number">(2/4)</span>
	</article>
	</body>
	</html>