Line breaking by syllables using CSS

When it comes to CSS properties, the word-break attribute is able to split words across lines at specific points (such as the first character extending beyond a certain length). Surprisingly, there seems to be no existing CSS method (even with limited support) for breaking words down into syllables like in traditionally printed books:

... the hymn, which Jude repeated under the sway of a poly-
theistic fancy that he would never have thought of...

Although I acknowledge that
(i) this feature may not frequently be needed on computers (due to dynamic reflow and justification), and
(ii) it would necessitate a hyphenation dictionary on the client's end.
However, it could prove beneficial for extremely long words (think James Joyce!) or simply to emulate the style found in printed materials; especially since modern browsers already offer spell-check capabilities, implementing hyphenation shouldn't pose significant obstacles.

With HTML's lang attribute, we can generally assume the language used; if the required dictionary isn't accessible, graceful degradation could come into play by using an alternative wrapping method.

Therefore, the question arises: Has there been any serious consideration given to syllable breaking within CSS? Or has this concept been dismissed altogether? Could we possibly anticipate its integration in upcoming developments?

Answer №1

If you're searching for the property called hyphens, make sure to use the lang HTML attribute as well, since hyphenation is language-dependent.

The browser can break words at appropriate hyphenation points based on its rules, but predefined line break opportunities will take precedence over automatic breaks when specified.

Note: The behavior of the auto setting relies on proper language tagging to apply the correct hyphenation rules. To ensure automatic hyphenation in a specific language, be sure to specify the language using the lang HTML attribute.

Learn more here

p {
  float: left;
  width: 250px;
  margin: auto 20px;
  border: solid 1px;
  hyphens: auto
}
<p>The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection
  when present.</p>

<p lang="en">The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection
  when present.</p>

Additionally, the :lang() pseudo-class is closely associated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing CSS image properties: A step-by-step guide

I've come across a strange conflict between Twitter Bootstrap (2.2.1) and Ad-Gallery in Internet Explorer. It seems that certain lines in bootstrap.min.css are causing issues, preventing images from displaying: img{max-width:100%;width:auto\9;h ...

Safely render user-generated HTML content within a React application to prevent cross-site scripting vulnerabilities

A unique situation has arisen in our React app where a user inputs a string that is displayed to other users. The challenge lies in searching for specific characters within the string and replacing them with HTML elements. For example, transforming the wor ...

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red ...

Is the order of SCSS (SASS) selectors important when dealing with nested classes?

Exploring SCSS Styles for List Items In this code snippet, I am investigating the order of selection for classes and pseudo-selectors in SCSS. Specifically, I am questioning whether &:before.active is equivalent to &.active:before. Here is an exa ...

The subsequent menu selection will be based on the chosen menu value

I am attempting to accomplish the following: https://i.sstatic.net/JffUWC02.png Essentially, I need a select options menu with labels where selecting an option will display a corresponding value. These values should then become labels for a second selec ...

What is the best option: using a Javascript template or exploring another

Just starting out in web development. I want to include the same menu on every page of my new website, but I don't want to manually update it in each file whenever there's a change. Is there an easy template engine for JavaScript or another sol ...

What could be the reason behind CSS internal style not working while inline style is functioning properly?

Here is the code I am currently working with. It seems that there may be an issue, but I'm not sure what it could be. The first part contains internal CSS and below is inline CSS which appears to be functioning properly. My suspicion is that the image ...

The rows-per-page menu option in Vuetify suddenly vanishes

I'm currently working on incorporating a v-data-table inside a v-card, you can view the code in this CodePen snippet: https://codepen.io/benwasin97/pen/eYveZGL <v-data-table :headers="headers" :items="items" ...

How to Retrieve Data from an HTML Table using the Laravel Framework

I have a unique and interactive Dynamic Sortable Table where I can effortlessly add or delete rows likethis uploaded image here. There is an intriguing loop in my controller that runs precisely 4 times, based on the number of columns in the table. However, ...

Choose from a variety of options for color schemes and hover effects

Looking to create a selector where users can pick a color. I tried changing the background color for each option, but when hovering over them, the background turns blue - which is not what I want. Check out the pictures for clarification: After doing some ...

The typography text exceeds the boundaries of the Material-UI CardContent

In the React Material-UI framework, I am working with a CardContent component that looks like this: <CardContent className={classes.cardContent}> <Typography component="p" className={classes.title} variant="title"> {this.props.post.title ...

Styles created using makeStyles in MUI are no longer working properly following an update to both MUI and React versions

Implementing the MUI Dropdown in a components library. When testing the library in Storybook, everything functions properly. However, when integrating the component into a separate React project, the layout becomes distorted. The Dropdown label is posit ...

Preserving CSS styling while loading an HTML page with InnerHTML

By using the following code snippet, I have successfully implemented a feature on my website that allows me to load an HTML page into a specific div container when clicking a link in the menu. However, I encountered an issue where the background color of ...

How can I align an input to the right using Bootstrap?

I found an example of a navbar that I liked and decided to copy it. Here is the code snippet: <div class="container"> <h3>Nawigacja zamknieta w kontenerze</h3> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> < ...

Swapping out a <DIV> element following a specified duration

Looking to swap out DIV-A with DIV-B on a landing page after 10 seconds. After some research, it seems like JQUERY is the best option, but I'm unsure about how to proceed. Most solutions involve cycling through DIVs or replacing them on a button clic ...

"Redirecting visitors based on their location using GeoIP targeting for

Is there a way to implement a code that redirects users based on their location? For example, if a user accesses the site from the United Kingdom, they should be redirected to /UK/, if from the US to /US/, and if from anywhere in the EU (excluding the UK) ...

`Trying to conceal the tr elements on button click proves tricky with jquery`

I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user. The specific requirements are: When the button is set to active, the elements ...

Receiving time slots on a bootstrap schedule

I recently developed a calendar using Bootstrap that allows users to select a start date and automatically sets the end date within a 7-day range from the chosen start date. However, I am facing a challenge in enabling users to also pick minutes along with ...

Image tag src displaying a React icon causes a malfunction

I am currently following a guide on ReactJS and encountered an error when trying to use an Img tag as directed in the tutorial. <Img src={keepLogo} alt="Google keep logo" /> This resulted in the following error: Warning: Invalid value for ...

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...