0
Not a bug

CSS seems to render double dashes prefixes as single dash

mc 6 months ago updated 6 months ago 5

Hello, I'm using Boldgrid with Hydra Theme in my personal Blog. It is an IT technical blog, so I often explain command line options. Long options are always prefixed by a double dash: for example --anoption. It seems that there's something in the CSS that makes the double dash being rendered as a single one. So --anoption is actually rendered as -anoption. This is an undesirable behavior, since the reader gets confused by this and thinks about typos, automangling defects and so on. May you kindly investigate it? Kind regards

Answer

Answer
Not a bug

Hello Marco-

Thanks for the bug report! This is actually behavior that's native to WordPress itself, not anything in the CSS or the BoldGrid Post and Page Builder.

WordPress has this "Feature" to improve typography. You can see the list of transformations that it makes in this article.

There are two ways you can get around this. First, you can wrap your code snippets in a Preformatted or Code tag, like so: 

<pre>--selector</pre>
<code>--selector</code>

You can also prevent WordPress from making transformations entirely by adding a filter to disable the text formatting filter altogether.

Answer
Not a bug

Hello Marco-

Thanks for the bug report! This is actually behavior that's native to WordPress itself, not anything in the CSS or the BoldGrid Post and Page Builder.

WordPress has this "Feature" to improve typography. You can see the list of transformations that it makes in this article.

There are two ways you can get around this. First, you can wrap your code snippets in a Preformatted or Code tag, like so: 

<pre>--selector</pre>
<code>--selector</code>

You can also prevent WordPress from making transformations entirely by adding a filter to disable the text formatting filter altogether.

Hello Jesse, thank you for the quick reply. Unfortunately pre and code tags are not suitable for my use case (they render the enclosed text into a separate box), so the only way viable to me is adding the filter to disable text formatting. I went to "Appearence" / "Theme Editor" and picked up "functions.php" file. I added the following

add_filter('run_wptexturize','__return_false');

as last line, but the rendering problem is still there.

Am I missing something?

Hi Marco!

It doesn't appear that you are missing anything, the filter included in your message looks like it should work and I am uncertain why it is not rendering properly on your website.


One thing I suggest trying is changing how the script is added to your website configuration. Instead of adding the code directly to the functions.php file, try installing the Code Snippets plugin and create a snippet with that plugin to add the filter to your website. A major advantage of using the plugin instead of modifying the theme files directly is that it will allow your customization to persist through any future theme updates, otherwise you will need to add your code again each time the theme updates.

Could you also send us a link to a page on your website where we can see the rendering issues with the double hyphens? It is possible that looking at the page source code might give us some insight on why the wptexturize filter is not working as expected.

Thank you for your understanding Marco and please let us know if you have any additional questions for us along the way!

Hi Marco-

I did a little testing on this to see if I could determine why your function isn't working. It looks like there's currently a bug in the weForms plugin that forces wptexturize to run.

I have created a bug report for weForms and we'll work on solving that for the future.

In the meantime, you can successfully disable wptexturize with a little work-around, by adding some new tags to the types of tags that aren't transformed. Here's an example code snippet:

function disable_wptexturize_tags( $tags ) {
    $tags[] = 'div';
    $tags[] = 'p';
    return $tags;
}
add_filter( 'no_texturize_tags', 'disable_wptexturize_tags' );

Dear Jesse, ... you are right: I've just applied the snippet you suggested and it's properly rendering. Thank you very much for your time. All the best