Skip to content

Commit

Permalink
remove duplicate webmention
Browse files Browse the repository at this point in the history
  • Loading branch information
jgerigmeyer committed Jan 6, 2025
1 parent 19c1464 commit 6274a16
Showing 1 changed file with 0 additions and 31 deletions.
31 changes: 0 additions & 31 deletions content/_data/webmentions.json
Original file line number Diff line number Diff line change
Expand Up @@ -147,37 +147,6 @@
"wm-property": "in-reply-to",
"wm-private": false
},
{
"type": "entry",
"author": {
"type": "card",
"name": "Nick Simson",
"photo": "",
"url": "https://nicksimson.com"
},
"url": "https://nicksimson.com/posts/drop-caps/",
"published": "2024-02-04T14:11:26-07:00",
"wm-received": "2024-02-04T21:11:36Z",
"wm-id": 1777153,
"wm-source": "https://nicksimson.com/posts/drop-caps/",
"wm-target": "https://www.oddbird.net/2017/01/03/initial-letter/",
"wm-protocol": "webmention",
"name": "D is for Drop Caps",
"syndication": [
"https://bsky.app/profile/nicksimson.com/post/3kkmsfax6p22q",
"https://mastodon.design/@nsmsn/111875631522267858"
],
"content": {
"html": "<img width=\"1024\" height=\"576\" src=\"https://nicksimson.com/wp-content/uploads/2024/02/26Days-D-Drop-Caps-1024x576.png\" alt=\"Day 4: Drop Caps\" />\n\n\n\n<p><strong><span>D</span>rop caps, or “dropped capitals”</strong> are a design element that can add a little <em>oomph</em> to your page (or screen). The idea is this: a large capital letter, the first letter of the first word of your paragraph, stands out as a decorative element. This captures your reader’s attention, hopefully drawing them in. The standard size of a drop cap is 2 or more lines tall. If you are reading this article on my website, and not in some RSS reader or <a href=\"https://instapaper.com/\">Instapaper</a>-type app, you may have noticed that the <strong>D</strong> in this very paragraph “pops” in the page design.</p>\n\n\n\n<p>This is day four of <a href=\"https://nicksimson.com/26-days-of-type/\">26 Days of Type</a>, my idiosyncratic series on all things font and font-adjacent. In the last few days I’ve neglected to explain more about <em>why</em> I’m doing this. Some of my remote tech worker pals and I are engaged in the <strong><a href=\"https://wiggle.work/\">Wiggle Work</a> Winter Writing Workshop</strong>—a challenge to write (and publish) something every day during the month of February. Joni has written a <a href=\"https://jonitrythall.com/breakfast-letters-take-two\">bit more of the background of this event</a> on her own blog. </p>\n\n\n\n<p>I also have a side project called <a href=\"https://typo.town/\">Typo.town</a> that I envisioned as this font of knowledge (pun intended) of all things type. I’m good at registering domain names, and OK at building websites, and fine at making and publishing lists. But I haven’t taken the time to write all the great content I’m imagining for this project. Since the beginning of the year, I’ve been <a href=\"https://nicksimson.com/notes/3e6d2720df/\">carving out time to write each day</a>. I’m aiming for 2-4 minutes during Mondays – Fridays and at least 24 minutes on the weekend. </p>\n\n\n\n<p>So my neglect of my side project, a personal yearlong goal, and this unique writing challenge have all coalesced into this month-long blog series. I’m hoping after 26 days (or 29 days if I <em>really</em> make it across the finish line) I’ll be in a regular mode of writing about this subject, and will have some content to backfill into Typo.town later in the year.</p>\n\n\n\n\n\n\n\n<p><strong><span>B</span>ack to drop caps.</strong> There are a couple ways to do this with CSS, as well as in your desktop publishing apps of choice. But first, I grabbed some various books around the house to showcase some more visual examples of drop caps in the wild.</p>\n\n\n\n<img width=\"768\" height=\"1024\" src=\"https://nicksimson.com/wp-content/uploads/2024/02/IMG_3639-768x1024.jpeg\" alt=\"An engraved O two lines tall opens a paragraph on Abraham Lincoln\" />From The Crroked Path to Abolition by James Oakes<img width=\"768\" height=\"1024\" src=\"https://nicksimson.com/wp-content/uploads/2024/02/IMG_3640-768x1024.jpeg\" alt=\"A big bold capital R three lines tall opens a short story\" />From Killing the Buddha by Peter Manseau and Jeff Sharlet<img width=\"768\" height=\"1024\" src=\"https://nicksimson.com/wp-content/uploads/2024/02/IMG_3643-768x1024.jpeg\" alt=\"A highly decorative red A stands 4 lines tall and opens a section about the prophets\" />From Apocrypha Now by Mark Russell and Shannon Wheeler<p>A drop cap is not to be confused with an <strong>initial cap</strong>, which sits on the baseline of the first line in the paragraph and extends higher. Here are a few examples of those:</p>\n\n\n\n<img width=\"768\" height=\"1024\" src=\"https://nicksimson.com/wp-content/uploads/2024/02/IMG_3644-768x1024.jpeg\" alt=\"A large capital W\" />From Welcome to the Monkey House by Kurt Vonnegut<img width=\"768\" height=\"1024\" src=\"https://nicksimson.com/wp-content/uploads/2024/02/IMG_3645-768x1024.jpeg\" alt=\"A large capital A opens The Lorax by Dr. Suess\" />From The Lorax by Dr. Seuss<img width=\"768\" height=\"1024\" src=\"https://nicksimson.com/wp-content/uploads/2024/02/IMG_3646-768x1024.jpeg\" alt=\"A huge capital L opens a page about Guitars\" />From Martin Guitars: A History<p>The first CSS method I will share is using good ‘ol fashioned box model CSS, a <code>&lt;span&gt;</code> plus the <code>display</code> and <code>float</code> properties. This method has been supported since what feels like forever. Check out the embedded CodePen below.</p>\n\n\n<p style=\"height:300px;border:2px solid;margin:1em 0;padding:1em;\">See the Pen <a href=\"https://codepen.io/nsmsn/pen/ExMRYre\"> Drop Cap One</a> by Nick Simson (<a href=\"https://codepen.io/nsmsn\">@nsmsn</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n<p></p>\n\n\n<p>If you want to get a little more advanced, Ethan Marcotte has a quick <a href=\"https://thegymnasium.com/courses/take5/creating-beautiful-and-accessible-drop-caps\">5-minute tutorial</a> on using the <code>:first-letter</code> pseudo-selector to style the first letter of the paragraph as a drop cap. His video and <a href=\"https://codepen.io/gymnasium/pen/QWjqmZg\">finished example on CodePen</a> also includes ways to make this more screen-reader friendly. </p>\n\n\n\n<p>Finally, I want to mention <code>initial-letter</code>, a CSS property now supported in most browsers except Firefox. But you can totally use <code>@supports</code> to offer this as a progressive enhancement, with a fallback for browsers that don’t support <code>initial-letter</code>. <a href=\"https://www.oddbird.net/2017/01/03/initial-letter/\">Stacy Kvernmo has written a wonderful tutorial</a> on using initial-letter to create drop caps that work in every browser. For more on <code>initial-letter</code>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter\">check out the MDN docs</a>.</p>\n\n\n\n\n\n\n\n<p><strong><span>N</span>ow if you are doing some work for print</strong> instead of HTML, I wanted to link to some resources for styling drop caps in some various desktop publishing applications: </p>\n\n\n\n<ul><li><a href=\"https://helpx.adobe.com/indesign/using/drop-caps-nested-styles.html\">InDesign from Adobe has great built-in support</a> for drop caps and nested styles. </li>\n\n\n\n<li>So does <a href=\"https://affinity.help/publisher/en-US.lproj/index.html?page=pages/Text/dropcaps.html&amp;title=Drop%20caps\">Affinity Publisher, in the <strong>Paragraph</strong> panel</a>.</li>\n\n\n\n<li><a href=\"https://support.microsoft.com/en-us/office/insert-a-drop-cap-817fd19f-40fe-4b73-95e8-f3c0f5e01278\">Microsoft Word lets you Insert &gt; Drop Cap</a> into a paragraph pretty simply and neatly.</li>\n\n\n\n<li>In <a href=\"https://support.apple.com/guide/pages/add-drop-caps-tan91b247fab/mac\">Pages for Mac, Drop Cap is a checkbox option</a> in the Format Sidebar and Style button.</li>\n</ul><p>Emphasizing the first letter has been around in publishing for centuries, and based on all the support in the 21st century, I don’t think it’s going anywhere soon. So <strong>go forth, and drop that capital letter!</strong></p>\n<span>Syndicated copies:</span><ul><li><a class=\"u-syndication\" href=\"https://bsky.app/profile/nicksimson.com/post/3kkmsfax6p22q\"> <span style=\"max-width:1rem;margin:2px;\" title=\"bsky\"></span></a></li><li><a class=\"u-syndication\" href=\"https://mastodon.design/@nsmsn/111875631522267858\"> <span style=\"max-width:1rem;margin:2px;\" title=\"Mastodon\">Mastodon</span></a></li></ul>",
"text": "Drop caps, or “dropped capitals” are a design element that can add a little oomph to your page (or screen). The idea is this: a large capital letter, the first letter of the first word of your paragraph, stands out as a decorative element. This captures your reader’s attention, hopefully drawing them in. The standard size of a drop cap is 2 or more lines tall. If you are reading this article on my website, and not in some RSS reader or Instapaper-type app, you may have noticed that the D in this very paragraph “pops” in the page design.\n\n\n\nThis is day four of 26 Days of Type, my idiosyncratic series on all things font and font-adjacent. In the last few days I’ve neglected to explain more about why I’m doing this. Some of my remote tech worker pals and I are engaged in the Wiggle Work Winter Writing Workshop—a challenge to write (and publish) something every day during the month of February. Joni has written a bit more of the background of this event on her own blog. \n\n\n\nI also have a side project called Typo.town that I envisioned as this font of knowledge (pun intended) of all things type. I’m good at registering domain names, and OK at building websites, and fine at making and publishing lists. But I haven’t taken the time to write all the great content I’m imagining for this project. Since the beginning of the year, I’ve been carving out time to write each day. I’m aiming for 2-4 minutes during Mondays – Fridays and at least 24 minutes on the weekend. \n\n\n\nSo my neglect of my side project, a personal yearlong goal, and this unique writing challenge have all coalesced into this month-long blog series. I’m hoping after 26 days (or 29 days if I really make it across the finish line) I’ll be in a regular mode of writing about this subject, and will have some content to backfill into Typo.town later in the year.\n\n\n\n\n\n\n\nBack to drop caps. There are a couple ways to do this with CSS, as well as in your desktop publishing apps of choice. But first, I grabbed some various books around the house to showcase some more visual examples of drop caps in the wild.\n\n\n\nFrom The Crroked Path to Abolition by James OakesFrom Killing the Buddha by Peter Manseau and Jeff SharletFrom Apocrypha Now by Mark Russell and Shannon WheelerA drop cap is not to be confused with an initial cap, which sits on the baseline of the first line in the paragraph and extends higher. Here are a few examples of those:\n\n\n\nFrom Welcome to the Monkey House by Kurt VonnegutFrom The Lorax by Dr. SeussFrom Martin Guitars: A HistoryThe first CSS method I will share is using good ‘ol fashioned box model CSS, a <span> plus the display and float properties. This method has been supported since what feels like forever. Check out the embedded CodePen below.\n\n\nSee the Pen Drop Cap One by Nick Simson (@nsmsn) on CodePen.\n\n\n\nIf you want to get a little more advanced, Ethan Marcotte has a quick 5-minute tutorial on using the :first-letter pseudo-selector to style the first letter of the paragraph as a drop cap. His video and finished example on CodePen also includes ways to make this more screen-reader friendly. \n\n\n\nFinally, I want to mention initial-letter, a CSS property now supported in most browsers except Firefox. But you can totally use @supports to offer this as a progressive enhancement, with a fallback for browsers that don’t support initial-letter. Stacy Kvernmo has written a wonderful tutorial on using initial-letter to create drop caps that work in every browser. For more on initial-letter, check out the MDN docs.\n\n\n\n\n\n\n\nNow if you are doing some work for print instead of HTML, I wanted to link to some resources for styling drop caps in some various desktop publishing applications: \n\n\n\nInDesign from Adobe has great built-in support for drop caps and nested styles. \n\n\n\nSo does Affinity Publisher, in the Paragraph panel.\n\n\n\nMicrosoft Word lets you Insert > Drop Cap into a paragraph pretty simply and neatly.\n\n\n\nIn Pages for Mac, Drop Cap is a checkbox option in the Format Sidebar and Style button.\nEmphasizing the first letter has been around in publishing for centuries, and based on all the support in the 21st century, I don’t think it’s going anywhere soon. So go forth, and drop that capital letter!\nSyndicated copies: Mastodon"
},
"mention-of": "https://www.oddbird.net/2017/01/03/initial-letter/",
"wm-property": "mention-of",
"wm-private": false,
"rels": {
"canonical": "https://nicksimson.com/posts/drop-caps/"
}
},
{
"type": "entry",
"author": {
Expand Down

0 comments on commit 6274a16

Please sign in to comment.