{"id":3610,"date":"2021-09-28T16:53:20","date_gmt":"2021-09-28T14:53:20","guid":{"rendered":"https:\/\/www.ewerkzeug.info\/?p=3610"},"modified":"2021-12-15T20:06:30","modified_gmt":"2021-12-15T19:06:30","slug":"the-shy-hyphenation","status":"publish","type":"post","link":"https:\/\/www.ewerkzeug.info\/en\/die-scheue-silbentrennung\/","title":{"rendered":"The shy hyphenation"},"content":{"rendered":"<p>The reason is that the browser simply does not know where to break according to the grammar rules. But a soft hyphen placed in the right place in long words does exactly that.<\/p>\n\n\n<h2 class=\"simpletoc-title\">Table of Contents<\/h2>\n<ul class=\"simpletoc-list\">\n<li><a href=\"#worum-es-geht\">What it's all about<\/a>\n\n\n<ul><li>\n<a href=\"#ohne-weiches-trennzeichen\">Without soft separator<\/a>\n\n<\/li>\n<li><a href=\"#mit-weichem-trennzeichen\">With soft separator<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#so-konnen-sie-das-weiche-trennzeichen-zur-silbentrennung-einsetzen\">How to use the soft hyphen for hyphenation<\/a>\n\n\n<ul><li>\n<a href=\"#htmlsonderzeichen\">HTML special characters<\/a>\n\n<\/li>\n<li><a href=\"#ein-unsichtbares-zeichen-kopieren\">Copying an invisible sign<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#umbruch-mit-css\">Wrapping with CSS<\/a>\n<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"worum-es-geht\">What it's all about<\/h2>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h3 class=\"wp-block-heading\" id=\"ohne-weiches-trennzeichen\">Without soft separator <\/h3>\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_ohne.png\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_ohne-473x1024.png\" alt=\"Without hyphenation\" class=\"wp-image-3612\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_ohne-473x1024.png 473w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_ohne-139x300.png 139w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_ohne-768x1662.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_ohne-710x1536.png 710w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_ohne.png 828w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h3 class=\"wp-block-heading\" id=\"mit-weichem-trennzeichen\">With soft separator <\/h3>\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_mit.png\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_mit-473x1024.png\" alt=\"With hyphenation\" class=\"wp-image-3613\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_mit-473x1024.png 473w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_mit-139x300.png 139w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_mit-768x1662.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_mit-710x1536.png 710w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/soft-hyphen_mit.png 828w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"so-konnen-sie-das-weiche-trennzeichen-zur-silbentrennung-einsetzen\">How to use the soft hyphen for hyphenation<\/h2>\n\n\n<p>The problem is that the character is invisible and you won't find it on your keyboard. <\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"htmlsonderzeichen\">HTML special characters<\/h3>\n\n\n<p>The soft separator is also available as a special HTML character. It reads: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-palette-color-5-color has-palette-color-3-background-color has-text-color has-background\">&shy;<\/pre>\n\n\n\n<p>Or alternatively:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-palette-color-5-color has-palette-color-3-background-color has-text-color has-background\">&#173;<\/pre>\n\n\n\n<p>But you cannot simply use this in text or heading blocks in a WordPress editor. This code is not interpreted, but is output on the page in exactly the same way: <\/p>\n\n\n\n<p class=\"has-text-align-center\"><kbd>Table of contents<\/kbd><\/p>\n\n\n\n<p>resp.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><kbd>Contents&#173;directory<\/kbd><\/p>\n\n\n\n<p>WordPress can be merciless, so that's not a solution. <\/p>\n\n\n\n<p>Alternatively, you can of course output your headings in an HTML block, in which case the drawing would appear invisible in the background. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-palette-color-5-color has-palette-color-3-background-color has-text-color has-background\">&lt;h2&gt;Table of contents&lt;\/h2&gt;\n&lt;h2&gt;Table of contents&lt;\/h2&gt;<\/pre>\n\n\n\n<p>However, you would have to struggle with HTML instructions, and those days should slowly be over.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"ein-unsichtbares-zeichen-kopieren\">Copying an invisible sign<\/h3>\n\n\n<p>So the trick is to somehow get the character into the computer's cache so that you can place it in the right place, in this case between the parts of the word <code><kbd>Contents<\/kbd><\/code> and <kbd>directory<\/kbd> can be used.<\/p>\n\n\n\n<p>You can obtain this invisible sign here, for example: <a href=\"https:\/\/unicode-explorer.com\/c\/00AD\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/unicode-explorer.com\/c\/00AD<\/a><\/p>\n\n\n\n<p>You will not see a character under \u201eCopy\u201c, but click on the button anyway. Then search for the long word in your website and insert the character where hyphenation is grammatically correct.<\/p>\n\n\n\n<p class=\"has-text-align-center has-medium-font-size\">Danube steamship electricity main works construction sub-officer company<\/p>\n\n\n\n<p>Yes, just test immediately by looking at this long word on the page on your smartphone, or narrow the browser window. <\/p>\n\n\n\n<p>Have fun.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"umbruch-mit-css\">Wrapping with CSS<\/h2>\n\n\n<p>If you are not afraid of using CSS instructions, you can also use them.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1, h2, h3, h4, h5, h6, p, li {\n  word-break: break-word;\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  -o-hyphens: auto;\n  hyphens: auto;\n}<\/code><\/pre>\n\n\n\n<p>In this case, soft wrapping would automatically occur for all headings, paragraphs and texts in lists.<\/p>\n\n\n\n<p>If your browser feels like it.<\/p>","protected":false},"excerpt":{"rendered":"<p>Do you know this? Viewing your website on desktop devices and tablets is great fun, but on mobile devices (smartphones) long words simply break somewhere when the screen width is no longer sufficient. <\/p>","protected":false},"author":2,"featured_media":3622,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"So k\u00f6nnen Sie das weiche Trennzeichen in langen Worten auf Ihrer Website zur Silbentrennung einsetzen.","_seopress_robots_index":"","iawp_total_views":113,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-3610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tipps"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/3610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/comments?post=3610"}],"version-history":[{"count":5,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/3610\/revisions"}],"predecessor-version":[{"id":3918,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/3610\/revisions\/3918"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/media\/3622"}],"wp:attachment":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/media?parent=3610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/categories?post=3610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/tags?post=3610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}