There are three changes to this PR. They're broken down by commit:
Consistent line height in lists & paragraphs (96311a0)
Only restrict width for top-level paragraphs (52e8fd0)
Top-level paragraphs should take up a percentage of the surrounding
<section>. All other paragraphs, (for example, those nested inside a
list, in a sidenote, etc.) should have the default: 100%.
Use margin instead of padding for lists (8147337)
Using margin instead of padding is preferred for nested lists.
We also drop the padding from 0.5rem to 0.25rem. For use cases where
you want a lot of spacing between the list items, you should be
wrapping the contents of the list item in a paragraph tag.
Testing
You can apply this patch to index.html to get some tests cases for testing
out lists (to make sure that there are no regressions).
Click to reveal patch
```diff
diff --git a/index.html b/index.html
index 1a1027b..c99df34 100644
--- a/index.html
+++ b/index.html
@@ -157,6 +157,99 @@
Epilogue
Many thanks go to Edward Tufte for leading the way with his work. It is only through his kind and careful editing that this project accomplishes what it does. All errors of implementation are of course mine.
+
+
+
Lists!
+
Simple lists (single line, no line wraps):
+
+
A list item
+
Another item
+
One last item
+
+
Longer lists (not wrapped in paragraph tags):
+
+
+ Tufte CSS provides tools to style web articles using the ideas
+ demonstrated by Edward Tufte’s books and handouts. Tufte’s style is
+ known for its simplicity, extensive use of sidenotes, tight
+ integration of graphics with text, and carefully chosen
+ typography.
+
+
+
+ Margin notes on lists line up at the same width as all other notes.
+
+
+
+ Finally, a reminder about the goal of this project. The web is not
+ print. Webpages are not books. Therefore, the goal of Tufte CSS is
+ not to say “websites should look like this interpretation of
+ Tufte’s books” but rather “here are some techniques Tufte developed
+ that we’ve found useful in print; maybe you can find a way to make
+ them useful on the web”. Tufte CSS is merely a sketch of one way to
+ implement this particular set of ideas. It should be a starting
+ point, not a design goal, because any project should present their
+ information as best suits their particular circumstances.
+
+
+ Technical jargon, programming language terms, and code samples are
+ denoted with the code class, as I’ve been using in this
+ document to denote HTML. Code needs to be monospace for formatting
+ purposes and to aid in code analysis, but it must maintain its
+ readability. To those ends, Tufte CSS follows GitHub’s font
+ selection, which shifts gracefully along the monospace spectrum from
+ the elegant but rare Consolas all the way to good old reliable
+ Courier.
+
+
+
Longer lists (1-2 paragraphs per list item):
+
+
+
+ Tufte CSS provides tools to style web articles using the ideas
+ demonstrated by Edward Tufte’s books and handouts. Tufte’s style is
+ known for its simplicity, extensive use of sidenotes, tight
+ integration of graphics with text, and carefully chosen
+ typography.
+
+
+
+
+ Finally, a reminder about the goal of this project. The web is not
+ print. Webpages are not books. Therefore, the goal of Tufte CSS is
+ not to say “websites should look like this interpretation of
+ Tufte’s books” but rather “here are some techniques Tufte developed
+ that we’ve found useful in print; maybe you can find a way to make
+ them useful on the web”.
+
+
+
+ Correct margin notes when list item has paragraph tag.
+
+
+
+ Tufte CSS is merely a sketch of one way to
+ implement this particular set of ideas. It should be a starting
+ point, not a design goal, because any project should present their
+ information as best suits their particular circumstances.
+
+
+
+
+ Technical jargon, programming language terms, and code samples are
+ denoted with the code class, as I’ve been using in this
+ document to denote HTML. Code needs to be monospace for formatting
+ purposes and to aid in code analysis, but it must maintain its
+ readability.
+
+
+ To those ends, Tufte CSS follows GitHub’s font
+ selection, which shifts gracefully along the monospace spectrum from
+ the elegant but rare Consolas all the way to good old reliable
+ Courier.
+
Fixes #117.
Commit Summary
There are three changes to this PR. They're broken down by commit:
Consistent line height in lists & paragraphs (96311a0)
Only restrict width for top-level paragraphs (52e8fd0)
Top-level paragraphs should take up a percentage of the surrounding
<section>. All other paragraphs, (for example, those nested inside a list, in a sidenote, etc.) should have the default: 100%.Use margin instead of padding for lists (8147337)
Using margin instead of padding is preferred for nested lists.
We also drop the padding from 0.5rem to 0.25rem. For use cases where you want a lot of spacing between the list items, you should be wrapping the contents of the list item in a paragraph tag.
Testing
You can apply this patch to
index.htmlto get some tests cases for testing out lists (to make sure that there are no regressions).Click to reveal patch
```diff diff --git a/index.html b/index.html index 1a1027b..c99df34 100644 --- a/index.html +++ b/index.html @@ -157,6 +157,99 @@Epilogue
Many thanks go to Edward Tufte for leading the way with his work. It is only through his kind and careful editing that this project accomplishes what it does. All errors of implementation are of course mine.
+ +Lists!
+Simple lists (single line, no line wraps):
++- A list item
+ - Another item
+ - One last item
+
+Longer lists (not wrapped in paragraph tags):
++-
+ Tufte CSS provides tools to style web articles using the ideas
+ demonstrated by Edward Tufte’s books and handouts. Tufte’s style is
+ known for its simplicity, extensive use of sidenotes, tight
+ integration of graphics with text, and carefully chosen
+ typography.
+
+
+
+ Margin notes on lists line up at the same width as all other notes.
+
+
+ -
+ Finally, a reminder about the goal of this project. The web is not
+ print. Webpages are not books. Therefore, the goal of Tufte CSS is
+ not to say “websites should look like this interpretation of
+ Tufte’s books” but rather “here are some techniques Tufte developed
+ that we’ve found useful in print; maybe you can find a way to make
+ them useful on the web”. Tufte CSS is merely a sketch of one way to
+ implement this particular set of ideas. It should be a starting
+ point, not a design goal, because any project should present their
+ information as best suits their particular circumstances.
+
+ -
+ Technical jargon, programming language terms, and code samples are
+ denoted with the
+
+codeclass, as I’ve been using in this + document to denote HTML. Code needs to be monospace for formatting + purposes and to aid in code analysis, but it must maintain its + readability. To those ends, Tufte CSS follows GitHub’s font + selection, which shifts gracefully along the monospace spectrum from + the elegant but rare Consolas all the way to good old reliable + Courier. +Longer lists (1-2 paragraphs per list item):
++-
+
+ -
+
+ -
+
+
+ Tufte CSS provides tools to style web articles using the ideas + demonstrated by Edward Tufte’s books and handouts. Tufte’s style is + known for its simplicity, extensive use of sidenotes, tight + integration of graphics with text, and carefully chosen + typography. +
++ Finally, a reminder about the goal of this project. The web is not + print. Webpages are not books. Therefore, the goal of Tufte CSS is + not to say “websites should look like this interpretation of + Tufte’s books” but rather “here are some techniques Tufte developed + that we’ve found useful in print; maybe you can find a way to make + them useful on the web”. + + + + Correct margin notes when list item has paragraph tag. + +
++ Tufte CSS is merely a sketch of one way to + implement this particular set of ideas. It should be a starting + point, not a design goal, because any project should present their + information as best suits their particular circumstances. +
++ Technical jargon, programming language terms, and code samples are + denoted with the
+codeclass, as I’ve been using in this + document to denote HTML. Code needs to be monospace for formatting + purposes and to aid in code analysis, but it must maintain its + readability. ++ To those ends, Tufte CSS follows GitHub’s font + selection, which shifts gracefully along the monospace spectrum from + the elegant but rare Consolas all the way to good old reliable + Courier. +
+