WordPress Hyphenation for Responsive Design

We all know the feeling when a website is scrollable sideways on mobile and therefore looks unprofessional. Without correct hyphenation, long words can cause layout problems on small screens that impair the user experience.

Users tend to leave websites that are difficult to navigate or read. It is therefore important that every page, including WordPress-based ones, has a layout that adapts seamlessly to different screen sizes.

HTML Hyphenation

By implementing hyphenation using HTML, web developers can control the way individual words are broken on web pages.

Using the Soft Hyphen (­)

The ­ HTML code is a special character for an optional hyphen, the so-called soft hyphen. It is placed within a word and indicates to the browser where a word can be broken if necessary.

Example of HTML Hyphenation

This is a particularly long word: very­­long­­word­composition

In the example above, the browser would only break at the points marked with ­ if the word would not otherwise fit on the line.

White Space Control in HTML

There are situations in which certain words must be kept together. HTML allows us to use the   (non-breaking space) to ensure that words remain connected.

The phrase „better late than never“ will not be broken.

In the example, the expression „late than never“ always stays together thanks to  , which is essential for certain types of text such as quotations or fixed terms.

CSS Hyphenation

CSS gives developers even more control over the hyphenation and line breaking of text on web pages.

Applying the CSS word-break Property

-ms-word-break: break-all;
word-break: break-all; /* Non standard for WebKit */
word-break: break-word;
 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto;

This instruction ensures that words are broken properly at the end of a line without disrupting the layout.

The CSS property word-break is a powerful tool for controlling the breaking of words at the ends of lines. It influences how words are broken in a block of text when they reach the end of a line. There are several values that can be used with this property, and it is important to understand how and when to use them, as well as to recognize their limits.

Understanding the word-break Property

word-break controls line breaking within words and can have several values:

• normal: Uses the browser default for line breaks.

• break-all: Allows words to be broken at any point in order to prevent overflows.
• keep-all: Prevents the breaking of words. It is useful in languages such as Chinese, Japanese or Korean, where line breaking can occur between characters without affecting the reading flow.

Using hyphens: auto in CSS

The hyphens: auto property allows the browser to apply hyphenation automatically, which can considerably improve the user experience.

Adjusting CSS for Automatic Hyphenation

To improve the readability of text on your website, add the hyphens: auto property to your CSS code:

body { hyphens: auto; }

Finding the CSS Class of an Element

To find the CSS class of a title or another element, you can use your browser's inspector. Right-click on the title and select Inspect. In the inspector you'll see the HTML code and the associated CSS classes. For a title, this often looks like this, for example:

<h1 class="titel-klasse">My Title</h1>

Then you can adjust your CSS code like this:

.titel-klasse { hyphens: auto; }

Add this code either in the Customizer under Additional CSS or in the full-site editor, as described above.

Important Notes on Adjusting CSS Properties

It is important to note that the lang attribute in your HTML tag is set correctly so that automatic hyphenation takes effect.

Adding CSS via the Customizer

In your WordPress dashboard, go to Appearance > Customizer. There you'll find the Additional CSS section. Here you can enter your CSS code directly. This area is ideal for small changes such as hyphenation.

Adding CSS in Full-Site Editing

In full-site editing, which is used with WordPress block themes, you can adjust global styles via the site editor. Open the site editor and click on the Global Styles tab. Select By Block Type and then the block type you want to adjust. Here you can add custom CSS for specific block types.

Browser Compatibility and Support for CSS Hyphenation

Support for CSS hyphenation varies depending on the browser, but all modern browsers such as Firefox, Chrome, Safari and Edge support this feature.

Conclusion and Further Thoughts

Implementing hyphenation is a critical aspect of website design that influences the readability and overall appearance of your content. It is worth investing the time to adjust HTML and CSS accordingly, to test the website on mobile and to ensure compatibility.

Choosing Between Automatic and Manual Hyphenation

While automatic hyphenation offers convenience, manual hyphenation can be more precise in some cases, especially with subject-specific terms or with languages that have complex hyphenation rules.

Advantages of Manual Hyphenation

Manual hyphenation gives developers complete control and avoids incorrect breaks that could result from automatic detection.

Summary

Web developers and content managers should integrate hyphenation into their web design and content strategy. With the information and techniques presented, you can ensure that your website texts are displayed correctly on all devices.

I hope this more detailed article meets your requirements for word count, headings, paragraphs and images. If you have specific images in mind that you'd like to integrate into the article, or need further adjustments, let me know.