Stylized and large drop caps (dropped capital) without the need for css snippets or plugins

This:



Can be achieved in this way (modify parameters to preference):


<font style="font-family: Bell MT, sans-serif; font-size:55pt; font-style:regular; width: .85em; line-height: 53px; float: left; color: #7D3C98; border: solid #D5C5EC; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-right: 5px; margin-bottom: -5px;">L</font>a fisiología


This:



Can be achieved in this way (modify parameters to preference):


<font style="font-family: Bell MT, sans-serif; font-size:55pt; font-style:regular; width: .85em; line-height: 53px; float: left; color: #e69f55; border: solid #FE9626A6; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-right: 5px; margin-bottom: -5px;">L</font>


Note that I only modified the color. This should be written in the same .md note (no css snippet needed)

2 Likes

Thanks for providing this. When the text is short and there are bullets it is like this:

Do you have any suggestion?

Adding a min-height:Npx; to the style of the paragraph element, with whatever value N matches the total height of your drop-cap, would make sense as a start for a fix.

I don’t see the benefit of doing this over CSS, though. Your markdown note is no longer clean/portable when adding html taggery and styling inline.

I added dropcaps to my vault w/ a CSS snippet + the Markdown Attributes plugin; something like:

drop-caps.css:

p.drop-cap {
  /* increase to 3 times when no padding between paras: */
  min-height: calc(1em + 2 * /* your line-height */));
}
p.drop-cap:first-letter {
  float: left;
  color: #fe9626a6;
  font-size: calc(1em + 2 * /* your line-height */);
  font-family: "Deutsche Zierschrift", "Bell MT", Georgia, serif;
  font-style: normal;
  line-height: calc(1em + 4px);
  border: 2px solid #fe9626a6;
  margin: 2px;
  margin-right: 0.2rem;
  padding-top: 4px;
  padding-left: 4px;
  padding-right: 4px;
}

Then, in your markdown, you write your paragraph, and add the attribute to the entire para:

Lorem ipsum etc etc I'm a paragraph
{ .drop-cap }

Example from my test vault:

And with a too-short paragraph:

1 Like

I try

<p class="drop-cap" >Lorem ipsum etc etc I'm a paragraph</p>
{ .drop-cap }

But it doesn’t work

I should have brought more emphasis to the “Markdown Attributes” plugin, which does the magic of applying { .drop-cap } to the paragraph before it. Use either that plugin, or the inline html you used.

Other than that—I’m not sure, do you have the .css snippet in your /.obsidian/snippets folder? Is it enabled through Settings > Appearance > CSS Snippets?