-
Posts
-
Hey guys,
Sometime, when using the WordPress text editor (tinyMCE I think…), I need to write words that contains a hyphen. ie: Pre-Order. But when the responsive version kicks in, sometimes these words are split and falls like this :
Pre-
OrderWhen I use the non-breaking hyphen hex symbol (‑), all is good. But, when I got back to edit that page, once I save it, the non-breaking hyphen is replaced by a regular hyphen…
Any workaround on this issue? Maybe a plugin?
Thanks for the help!
Hey Phet,
You could try to enforce not breaking by css, but we need to see it on the page, to tell you for sure.
Best regards,
VictoriaHere’s the link : http://www.myosante.com/
Not sure if CSS can do it…
Other thing to note is that we can’t expect that the user will use the hex code for the non-breaking hyphen every time they go in and write an article.
Thanks for the help.
what is the thing you like to reach for e.g. “Pre-Order”
you want to prevent the hyphenation in this word?
I like this little tool from Frank Bültge (addquicktag)
this tool adds quick tags to your editor for example a “nowrap” tagyou have to define a class f.e.:
.nowrap { white-space:nowrap; }if you are in your editor now you can mark a word or a phrase and use quick tag.
This will generate an opening tag like<span class="nowrap">and after the marked content a closing tag</span>you can do it by text-modus too – but with addquicktag it is realy simple then.
Thanks for the insight Gunter! But it’s not what I’ld like to do…
The situation is that sometime, when a user types a word like “Pre-Order” or other words that like “Trois-Rivières” that containes a discretionary hyphen, this word is “broken” after the discretionary hyphen. Resulting with a portion of the word at the end of the line and a second portion of the word on the next line.
Also, I can’t expect a user to use a CSS class or the HTML entity #8209; everytime they try to type these type of words… It need to be as easy as possible for the user.
I think idealy, it would be a plugin or function (for the function.php file) that would replace any discretionary hyphen by the non-breaking hyphen HTML entity #8209; just before rendering the page… Not sure if it existe…
maybe it is possible through the wptexturize function in wp-includes/formatting.php
but how should a function decide if a dash is a non-breaking hyphen or not.This was first in my mind:
function non_breaking_hyphens($content){ return str_replace('-', '‑', $content); } add_filter('the_content', 'non_breaking_hyphens');the second dash is your entity – the board soft directly transfered it allthough it is in code block
so it is&and behind#8209;
PS: now i see that french has alot of those words rendez-vous etc.
PPS: this is the way Enfold did it with the ampersand sign and some quotation-marks (functions-enfold.php lines 571ff)
Maybe this could be done here too- because if a dash is set consciously it is nearly 100% a non-breaking dash.but you have to use normal hyphen – i see you used sometimes in “Myo‑Santé” a different dash (longer one)
see also here: https://csswizardry.com/2010/01/the-three-types-of-dash/btw: for a soft-hyphen ( an unseen breaking point of a word) i would never use a normal dash on those cases i use
or ­
and because of boardsoft which transfer these Entities directly in its pendent it is&and behind#173;orshy;PPS – a bit offtopic : i sometimes use the very good plugin hyphenator to have a typographical correct hyphenation – and mainly when using Textblocks in justify manner. see Here (it is not only german)
so this seems to be better :
function replace_content($content) { $content = str_replace('-', "<span class='nobreak'>‑</span>",$content); return $content; } add_filter('the_content','replace_content');here is the image because you know now :
see here in action: https://webers-testseite.de/abc/
The class seems to be very important (like with ampersand and doublequotes on functions-enfold.php) – there is no need to have some rules behind that class -but without there was a mess in enfold alb elements sometimes.
it does not work in the way i want. Everything works fine but it has to be more specific only for textarea. it changes even in Source code all hyphens to the new replacement. F.e. classes from style=text-align etc.
hey mods – no idea how to make it more specific.?
Hey Gunter,
Just wanted to say that I realy appriciate the help. Don’t know why WP doesn’t make this just a built-in thing! French is probably not the only language that has this particularity. I try another crack with my friend Google and try to search for a plugin or function.
the code works but i do not know how to avoid replacing in f.e. google-map iframe input. The replacement does not stop doing that job on inline-style etc. so there must be a way to make the replacement more specific – means f.e. only replace the string on phrases and headings f.e.
i stay connected.
by the way not all fonts (webfonts) do have that sign (non-breaking-hyphen)
for the headings we can use the ampersand filter :
add_filter('avia_ampersand','non_breaking_hyphens'); function non_breaking_hyphens($content) { $content = str_replace("-","‑",$content); return $content; }think of the second – is the entity & #8209
Hi,
@Guenni007 thanks for a great solution :)Best regards,
Mike
- You must be logged in to reply to this topic.