-
AuthorPosts
-
July 14, 2018 at 7:44 am #985418
What Plugin i can install for Enfold to hyphenation?
I tried wp-typography but the plugin does not work with enfold. This destroys the footer in the mobile version. Or is there another way to hyphenation (without plugin)?July 15, 2018 at 6:34 am #985571Hey frasche,
I’m 100% I understand what hyphenation is actually, but I think it’s possible with CSS. Do you have an example of what you are trying to achieve? Also please post a link to your site and point out where you want to apply it to.
Best regards,
RikardJuly 15, 2018 at 6:55 am #985581U can read here: https://www.walterlernt.ch/2015/08/05/automatische-silbentrennung-in-wordpress/
If u not can read german, plz use google translator.
U can use in HTML this: or. But than u must do everything manual.
Better solution is in CSS:Example for HTML (use CSS)
_____________________
CSS:
/* hyphens */
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
_____________________HTML:
<html lang=”de”>July 15, 2018 at 8:15 am #985610As you mentioned the word to look for is hyphenation – and the WordPress Plugin is Hyphenator : https://de.wordpress.org/plugins/hyphenator/
i’m very happy with that – i often use it on pages where my customers like to have justified text.Hyphenator automatically inserts separators in the content, so that at the end of line the text is wrapped with a dash if applicable. Hyphenator.js, a JavaScript available under the terms of LGPL v3, is used. It fields the algorithm known from OpenOffice and LaTeX. As this is executed client-sidedly, it adapts itself to the respective browser environment and thus avoids a faulty display. The script is particularly suitable for justification and supports a variety of languages.
to avoid unnecessary use of the whole thing, you simply assign a user-defined class (default is hyphenate) for the textblocks you like to hyphenate in that manner.
July 15, 2018 at 8:49 am #985615thanks for the tip
I just installed the plugin but it does not work. Am I doing something wrong?July 15, 2018 at 3:46 pm #985662July 16, 2018 at 1:17 am #985796Hey, thanks again. I do that. See here:
<div id=”hyphenate”>
<p style=”margin-bottom: 30px;”><span style=”font-size: 16pt; font-weight: bold; font-family: Open sans,Helvetica,Arial,sans-serif; color: #982825; line-height: 1.5;”>Impressum</span></p>
<p style=”margin-bottom: 0px;”><span style=”font-size: 13pt; font-weight: bold; font-family: Open sans,Helvetica,Arial,sans-serif; color: #982825; line-height: 1.5;”>Exampletext….. </span></p>
</div>
But still not work…
I use Enfold Theme.July 16, 2018 at 7:24 am #985836Hi,
You are using an ID in your code, @guenni007 mentioned that it’s supposed to be a class:
<div class="hyphenate">Your content</div>
Best regards,
Rikard- This reply was modified 6 years, 5 months ago by Rikard.
July 16, 2018 at 7:37 am #985842anyway… it still not work.
<div class=”hyphenate”>
<p style=”margin-bottom: 30px;”><span style=”font-size: 16pt; font-weight: bold; font-family: Open sans,Helvetica,Arial,sans-serif; color: #982825; line-height: 1.5;”>Impressum</span></p>
<p style=”margin-bottom: 0px;”><span style=”font-size: 13pt; font-weight: bold; font-family: Open sans,Helvetica,Arial,sans-s….. </div>July 17, 2018 at 4:23 am #986222Hi,
What happens if you remove the markup within the div? I’m guessing that the CSS will only target the hyphenate class, not .hyphenate p or .hyphenate p span like in your markup.
Best regards,
RikardJuly 17, 2018 at 3:30 pm #986475yes it is best influence if you do the custom-class to the p tag or span where your text is in.
But it will work too if you do the class to a parent container.
see example here https://webers-testseite.de/hyphenator/
you see on the first two columns that there are dashes at the end of a line – and break the word with grammatical rules._________________
But looking to your Examples i think you are talking about something different.
You can influence Words behavior on shrinking screen width. A lot of Enfold Headings do not break on very small screens. This might result in an overlapping heading over the container border.you can set this via css – see here the usage with trials :
https://www.w3schools.com/cssref/css3_pr_word-break.asp :tryhttps://www.w3schools.com/cssref/css3_pr_word-wrap.asp :try
https://www.w3schools.com/cssref/pr_text_white-space.asp :try
https://www.w3schools.com/cssref/css3_pr_hyphens.asp :try
on a lot of input fields you can enter manual “predetermined breaking point” for example for long headings – where you like to decide where a word break:
soft hyphen = discretionary hyphen­
or­
the last code you have to set a semicolon after the 3 – boardsoft did change it imediately – even if i insert it in code tags here
July 18, 2018 at 12:06 am #986693Hallo Guenni007,
ich gehe mal davon aus, dass du Deutsch spricht. Die Lösung mit den manuellen Zeilenumbrüchen () habe ich als “Notlösung” bereits vor einigen Tagen eingebaut. Das funktioniert selbstverständlich einwandfrei, war aber eine Arbeit, die ich vermeiden wollte. Ich dachte, ich kann ein PlugIn installieren, dass auch mit benutzerdefinierten Klassen funktioniert.
Bei anderen WP Projekten habe ich wp-Typography eingebaut und das PlugIn funktionerte immer sehr gut.
Dieses Projekt werde ich in den nächsten Tagen abschließen, würde aber ENFOLD gerne für andere Projekte nutzen wollen. Deshalb wäre es für mich toll, wenn ich eine Lösung hätte.
Das Problem ist, dass man häufig benutzerdefinierte Klassen einbauen muss, um den Kunden das gewisse “Etwas” zu bieten. Deshalb bin ich auch weiterhin an einer Lösung für die Zukunft interessiert.
Übringens: Vielen Dank dass du dir die Mühe gibst, so ausführlich zu schreiben. Du machst ja einen besseren Support als die Damen und Herren von Kriesi…LG Frank
July 18, 2018 at 6:15 am #986772Hallo Frank,
Thanks for the feedback. Please let us know if you should need any further help on the topic.
Grüß,
RikardJuly 18, 2018 at 6:18 am #986775Sorry Rikard, but you don’t help me.Guenni007 (Participant) help me. That’s sadly,or?
July 18, 2018 at 3:12 pm #987022Hi Frank,
Thanks for the feedback, should we close this thread for now?
Best regards,
RikardJuly 18, 2018 at 7:47 pm #987152Ich bin mir aber nicht im Klaren, ob das Plugin oder ein anderes das in Überschriften vermag, wenn ein explizite word-break oder word-wrap Anweisung existiert.
Ausserdem solltes du mit solchen tools sparsam umgehen. Dei Manuelle Methode ist zwar zeitaufwändig, aber dafür Performance schonend. Denn wenn ganze Seiten von dem Plugin nach möglichen hypens durchsucht werden und gesetzt werden müssen geht das ganz schön auf die Server-Power.Eventuell stellt dich ja die normale Trennung zufrieden (nicht die grammatikalisch perfekte):
h1,h2,h3,h4,h5,h6 { hyphens: auto !important }
____________
But I’m not sure if the plugin or any other plugin can handle headlines if there is an explicit word-break or word-wrap statement.
Also, you should use such tools sparingly. Although the manual method is time-consuming, it is performance-saving. Because if whole pages are searched by the plugin for possible hypens and must be set, this goes quite on the server power.July 20, 2018 at 5:10 am #987681The Tipp from Guenni007 was perfect for me. Thanks a lot.
Now u can close this thread.July 20, 2018 at 6:19 pm #987962Hi frasche,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
VictoriaMarch 4, 2019 at 3:46 pm #1074405Hallo, dieser hier vorgestellte Code funktioniert bei meiner Seite in der Desktopversion gut, hat aber keine Responsive-Wirkung:
h1,h2,h3,h4,h5,h6 {
hyphens: auto !important
}WIe kann ich das im Quick CSS einrichten bzw. den Code so ergänzen, dass die Headlinetrennungen auch im Mobile Design automatisch laufen?
Vielen Dank!
March 6, 2019 at 9:36 pm #1075644Hi schnelletexte.de ,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaMarch 7, 2019 at 6:41 am #1075784Hi Victoria,
it is https://supervision-ffm.com/
Thank you and best regards,
JohannesMarch 11, 2019 at 4:38 am #1077197Hi,
Are you using a Chrome browser? The hyphen property is not supported by major browsers including Chrome, so it won’t work there.
// https://caniuse.com/css-hyphens/embed
Use this css property instead.
// https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.