Drop Caps for Squarespace Blogs
Let’s make some elegant drop caps in Squarespace.
Code Curious Members
If you’re a Code Curious Member, you can access this code, and hundreds more, directly from the Toolkit Extension.
Add this to your Custom CSS area
.blog-item-content p.first-paragraph::first-letter {
initial-letter: 3;
padding-right: 4px;
}
Add this to your Blog Settings » Advanced » Blog Post Item Code Injection area.
<script>
const firstParagraph = document.querySelector('.blog-item-content p');
firstParagraph.classList.add('first-paragraph')
</script>
How this works
We can now easily add dropcaps with the ::first-letter pseudo-selector and the newer initial-letter property.
From MDN Docs:
"::first-letter applies styles to the first letter of the first line of a block container."
So we could target the first letter of every paragraph on our website using this css:
p::first-letter {
}
The initial-letter property takes 2 values, the first sets the size, the second sets it’s baseline. Both are a function of line height in the text block.
Again, from MDN docs:
"The initial-letter CSS property sets the size and sink for dropped, raised, and sunken initial letters. This property applies to ::first-letter pseudo-elements…"
The “size and sink” referenced here are best understood by thinking of the line-height of the paragraph.
Examples:
/* Two values */
initial-letter: 3 2; /* 3 lines tall, baseline at line 2 */
initial-letter: 3 1; /* 3 lines tall, baseline unchanged */
The initial letter property takes 2 values, the first sets the size, the second sets it’s baseline. Both are a function of line height in the text block.
Targeting Blog Post Paragraphs
Unfortunately there isn’t a perfect css selector to target the first paragraph block in blog post. So we use a little javascript (seen in The Code above) to find the first paragraph block and add the first-paragraph class to it. Then in our CSS, we target that class to apply our drop caps just to that paragraph.
