Support » Plugin: Shortcoder » [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.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘[TIPS] Shortcode for CSS’ is closed to new replies.