Insert HTML in content property and render it using shortcodes or other

  • I defined the following data-* attribute for a span

    [data-note] {
  position		  : relative;
  display		  : inline-block;
  margin-bottom   : 1.5em;
  text-decoration : underline;
}

[data-note]::after {
  position   : absolute;
  width		 : 100%;
  left       : 0;
  font-size  : .75em;
  text-align : center;
  content    : attr(data-note);
  top        : 80%;
}

    which I use in the following way

    The word <span data-note="is possible?">"everything"</span> has a text below it.

    to obtain

    I would like to be able to put also html codes inside the data-note, for example

    The product <span data-note="2<sup>3</sup>">2 * 2 * 2</span> can be written as power.

    but unfortunately the content property of a pseudoelement can’t render html, that is the value given to data-note is treated literally and it is not interpreted.

    Is it possibile to define a shortcode, such as

    function test_sc( $atts, $content = null ) {
	$a = shortcode_atts( array(
		'note' => '',
	), $atts );
        /* do something to render the 'note' attribute */
		return "<span data-note='{$a['note']}'>" . $content . "</span>";
}
add_shortcode( 'test', 'test_sc' );

    which could be used in this way

    The product [test note="2<sup>3</sup>"]2 * 2 * 2[/test] can be written as power.

    and such that it renders the note html code before passing it to the span element?

    I tried with

    function test_sc( $atts, $content = null ) {
	$a = shortcode_atts( array(
		'node' => '',
	), $atts );
		remove_filter( 'the_content', 'wpautop' );
		$content = apply_filters( 'the_content', "<span data-note='{$a['node']}'>" . $content . "</span>" );
		add_filter( 'the_content', 'wpautop' );
		return $content;
}
add_shortcode( 'test', 'test_sc' );

    but it doesn’t work.

    • This topic was modified 5 years, 4 months ago by giannit.
Viewing 5 replies - 1 through 5 (of 5 total)

  • The solution you are attempting doesn’t address the issue. You want to put HTML where HTML is not rendered. So change how you do it.
    Instead of using the content property in CSS, use a sibling span with a class.
    That way it isn’t in the content property, and is accessible to all visitors (email and feed readers won’t have the CSS).
    There are ways to show complicated mathematical formulas, if you need that.

    Thread Starter giannit

    (@giannit)

    @joyously How can we achieve the same effect using a sibling span?

    • This reply was modified 5 years, 4 months ago by giannit.

    OK, not sibling, but child.
    Try this CSS

    .above {
  position		  : relative;
  display		  : inline-block;
  margin-bottom   : 1.5em;
  text-decoration : underline;
}

.above .below {
  position   : absolute;
  width		 : 100%;
  left       : 0;
  font-size  : .75em;
  text-align : center;
  top        : 80%;
}

    with this HTML
    The word <span class="above">"everything" <span class="below">is possible?</span></span> has a text below it.
    or
    The product <span class="above">2 * 2 * 2 <span class="below">2<sup>3</sup></span></span> can be written as power.

    • This reply was modified 5 years, 4 months ago by Joy. Reason: oops, left the content property in there
    Thread Starter giannit

    (@giannit)

    Thank you very much @joyously !
    I improved a bit the code and now the result looks like this

    code is

    .above {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5em;
  }
  .above::before {
    position: absolute;
    top: 90%;
    height: 6px;
    width: 100%;
    border: 1.5px currentcolor solid;
    border-top: 0;
    content: "";
  }
  .above .below {
    position: absolute;
    width: 100%;
    left: 0;
    top: 140%;
    font-size: 0.75em;
    text-align: center;
  }

    The product <span class="above">2 · 2 · 2 <span class="below">2<sup>3</sup></span></span> can be written as power.

    Do you think the code can be improved more?
    Here is a DEMO, I noticed that if I increase the font-size then the distance between the border and the below text increases, why is that?
    Thank you very much!

    • This reply was modified 5 years, 4 months ago by giannit.
    • This reply was modified 5 years, 4 months ago by giannit.

    Because the .above::before border and height not dynamic from parent.
    Try to change px to em

    .above::before {
  ..
  height: 0.375em;
  border: 0.09375em currentcolor solid;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Insert HTML in content property and render it using shortcodes or other’ is closed to new replies.