Styling Text Articles Upward

created Jan 4, 2019

The versions below use the same content that's contained in my sawv.org post, titled Notes - Sat, Dec 2, 2017. sawv.org is hosted on a Digital Ocean Droplet server.

These files, however, are stored on an Amazon.com AWS S3 bucket.

  1. Plain text, Markdown - the word count is approx 787 words. no images. only text.

  2. HTML with no CSS - this is how websites display when i use the uMatrix browser extension cranked up, blocking everything. it's also how websites appear in the links2 -g web browser. of course, the Lynx web browser is text-based. At least links2 -g supports images.

  3. HTML with a few lines of CSS - the slightly modified CSS was borrowed from one of the effing websites. uses ems.

  4. HTML with a small amount of CSS - softens the text color, adds a subtle background color, uses system fonts. uses pixels instead of ems.

  5. Like No. 4 but with HTML5 tags added - a few semantic HTML5 tags were added, such as <article>, <header>, <section>, etc.

  6. Like No. 5 but with Microformats added - The Microformats were added as classes to some of the HTML tags per the IndieWeb's suggestion. The page can be tested at https://indiewebify.me in the "Validate h-card" section. More info about h-card can be found at: https://indieweb.org/h-card.


The byte sizes for those files on the file system of my Digital Ocean server. Naturally, the file sizes get larger as styling and semantics get added.

4647 Jan  4 16:13 markdown.txt
5137 Jan  4 16:14 nocss.html
5421 Jan  4 16:14 tinycss.html
6109 Jan  4 16:13 somepxcss.html
6272 Jan 12 03:05 somehtml5.html
6419 Jan 12 03:13 mft.html

webpagetest.org results

I'm surprised at the "slow" download speeds for these simple files, hosted on an AWS S3 bucket.

Results for markdown.txt
First View - Fully Loaded:
From: Dulles, VA - Chrome - Cable
1/4/2019, 12:33:48 PM
Time: 0.355 seconds
Requests: 2
Bytes in: 5 KB

Results for nocss.html
First View - Fully Loaded:
From: Dulles, VA - Chrome - Cable
1/4/2019, 12:29:09 PM
Time: 0.377 seconds
Requests: 2
Bytes in: 6 KB

Results for tinycss.html
First View - Fully Loaded:
From: Dulles, VA - Chrome - Cable
1/4/2019, 12:31:18 PM
Time: 0.348 seconds
Requests: 2
Bytes in: 6 KB

Results for somepxcss.html
First View - Fully Loaded:
From: Dulles, VA - Chrome - Cable
1/4/2019, 12:20:49 PM
Time: 0.536 seconds
Requests: 2
Bytes in: 7 KB

CSS used

tinycss.html

body{
    /* font size approx 22 px */
    margin:1em auto;
    max-width:30em;
    padding:0 .62em;
    font:1.37em/1.62 sans-serif;
}
h1,h2,h3 {line-height:1.2;}
h1 {font-size: 1.65em;}
p {margin: 1.8em 0 1.8em 0;}
img {max-width: 100%;}
@media print{
    body{max-width:none}
}

somepxcss.html

body {margin: 0 auto; max-width: 640px; font-size: 22px; width: 100%;  line-height: 35px; color: #222; background-color: #fffff6;}
body {font-family: system-ui, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", Verdana, "Helvetica", sans-serif;}
img {max-width: 100%;}
pre, code {font-size: 16px; background: #fff8dc; overflow-x: scroll; overflow-y: hidden;}
p {margin: 40px 0 40px 0;}
h1 {font-size: 35px;}
h2 {font-weight: 400; font-style: italic; font-size: 30px;}
h1,h2,h3,h4,h5,h6 {line-height:1.2;}
blockquote {background: #E3F2FD; margin-left: 15px; padding: 0 0 0 15px;  border-left: 1px solid #666; }
@media print{body{max-width:none; color: #000; background-color: #fff; line-height: normal; font-size: 18px;}}
@media only screen and (max-width: 680px) { body {max-width:92%} }