[TIPS] Shortcode for CSS

Hello!

I’ve used Shortcoder for a couple of CSS tricks, and I thought I share them.

Tip 1: arbitary coloured superscipt

You want to indicate certain words or phrases. For instance you want to put a blue superscript B to indicate the phrase has biblical origin.

1. Create a shortcode,say “be” for biblical expression.
2. Put into the content

<style type="text/css">
be::before
{
  content: "\00a0B";
  vertical-align: super;
  font-size: smaller;
  font-weight: bold;
  color: #003f87;
}
</style>
<be/>

Now you can write
Lorem ipsum[sc name="be"]

which will put after the word ipsum a space (“\00a0” in the content property) and a “B”, that is a small (font-size), blue (color) bold superscript (vertical-align).

Note, the chosen html element (“<be/>” above) may not be a reserved one (thus “<b/>” will not do).

A second note: since the superscript is produced by CSS content property it is not selectable.

Tip 2: show word-break in a compound string but copy non-word-break string

You want show, where the word break is in a compound word. This is not an issue in English, so let’s take a German word for high-way “Auto//bahn”, where you use // to show the word break.

1. Reuse the tip 1 above, create a shortcode “wb” for word-break with the content:

<style type="text/css">
wb::before
{
  content: '\002F\002F';
}
</style><wb/>

where the code “\002f” stands for forward-slash. Note, that the end of style element and the wb element must be on the same line or you will get an additional space.

2. There is a less-known CSS property called “user-select”. You might want to take a look at a post at CSS-tricks.com. Combine these

<span style="user-select: all;">Auto[sc name="wb"]bahn</span>

What the user sees is “Auto//bahn”, but when s/he clicks on either Auto or bahn the word Autobahn without the double slash gets selected, thus copyable into a search field or into user’s notes.

See CSS-tricks.com for browser differences.

I hope you get the idea and find these tips useful.

• This topic was modified 7 years, 8 months ago by Juha Metsäkallas.
• This topic was modified 7 years, 8 months ago by Juha Metsäkallas.
• This topic was modified 7 years, 8 months ago by Juha Metsäkallas.
• This topic was modified 7 years, 8 months ago by Juha Metsäkallas.