How to create a hotkey to make certain text small-caps?

What I’m trying to do

I’m a law student and I would like to be able to have a hotkey to highlight certain text and turn it small-caps as it is an important part of legal formatting.

(Small caps | Typography for Lawyers)

Things I have tried

I tried to use a CSS snippet like this one:

But was not sure how to implement it.

I have also learned that I can manually type it like this:

<span style="font-variant:small-caps;">Christopher N. May, Allan Ides & Simona Grossi, Constitutional Law: National Power and Federalism</span>

But this is fairly time-consuming and I’d prefer to avoid it, or at least shorten it if possible.

I have no coding background, and am not the most tech-savvy. If someone could offer some guidance, that’d be really helpful.

With a bit of googling I found this plugin, it seems like their “custom wrapper” function may be what you’re looking for.

You could use a snippet like the one above (which is more portable if you’ll be transferring these markdown files by themselves and want them to retain their formatting), so a custom wrapper with <span style="font-variation:small-caps;"> </span>

If you care about the brevity of your markdown over its portability (i.e. it’ll only render small caps with following css setup), consider adding the following CSS snippet; with it, you could create a custom wrapper <span data-sc> </span> that I think would do what you want:

span[data-sc] {
  font-variant: small-caps;
}

Hope that works well for you!!

Another option, if you wanted to use the HTML as is, is the great GitHub - manic/obsidian-wrap-with-shortcuts: Wrap selected text in custom tags with shortcuts. plugin. This can be used with Phosphorite’s suggestion as well.

  • Set the name, the start and end tag, give it a hotkey if you’d like, and restart Obsidian. Any text you select will be wrapped in the tags when you run the command / hotkey.

CleanShot 2024-04-28 at 08.32.36

1 Like

Thank you both so much!!

Rather than <span style="font-variation:small-caps;"> I suggest using a class name that indicates the nature of the text, like <span class="definition">. Then in a CSS snippet put .definition {font-variation:small-caps;}. This is more semantic and makes the text less cluttered, plus it lets you restyle every definition at once if needed. (That can get nasty when you use ad-hoc styles.)

2 Likes