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

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

Is it possible to include all the information in a form submission, not just the inputs?

I have a problem with submitting the form and accessing all the variables I need. When I check the $_POST variable, I only see the values of the form inputs. Is there a way to also send other variables like the content of multiplicator1? How can I achiev ...

CSS - Text and dropdown misalignment due to spacing issue

I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box. Here is the code snippet being used: .cl-checkbox { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; ...

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

Positioning the box in the middle of pages

I have a website page at the following link: However, the content is not centered on the screen. Here are the codes I'm using: <div class="section_inner"> <div class="container"> <div class="row"> <?ph ...

Exploring the Information Within HTML Forms

When my HTML form sends data to the server, it looks like this: { r1: [ '1', '2', '3' ], r2: [ 'Top', 'Greg', 'Andy' ], r3: [ 'validuser', 'invaliduser', 'validuser&a ...

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

I have 3 sets of radio buttons. When a specific anchor with the "round" class is clicked, two actions should occur: The associated set of radio buttons needs to become visible The value of the checked input for that element should be returned. I am ...

Using jQuery to add a class to an input option if its value exists in an array

Looking for a way to dynamically add a class to select option values by comparing them with an array received from an ajax call. HTML <select id="my_id"> <option value="1">1</option> <option value="2">2</option> ...

How to centrally align tabs in Material-UI AppBar using ReactJS

I'm developing a React Application using Material-UI and facing difficulty in centering the 3 tabs within the blue AppBar. Currently, they are aligned to the left like this: (unable to embed images at the moment, apologies) This is the code snippet ...

Fill the list items with values from the given array

I have an array called var array = ["one", "two"]; and I want to display each element in a separate list item. The desired output is: <li>Number one</li> <li>Number two</li> However, the current output is: <li>Number onetw ...

What could be causing my file input to appear misaligned?

Can anyone assist me with a strange issue I am facing? Despite using inspect element on my file input and it appearing in the correct place, it does not function as expected. To see for yourself, visit oceankarma.co and click on 'Post' at the top ...

Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...

Tips on dynamically looping the formcontrolname and implementing validation strategies

Looking for a way to validate multiple looping of dynamic formControlName="xxx" in select field. Check out my HTML code: <ul *ngFor="let detaillist of stressli.stresstabdetails;"> <li> <div class="form-container"> ...

Issue with CSS styling on a content slider causing the last picture to display incorrectly

I recently updated a Content Slider and tweaked the styles to my preference. Check out the changes I made on this link. In addition, I included an extra Thumbnail Picture on the right (7th one) along with the Main Picture. Oddly enough, the Slider seems ...

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...

What is the best way to position two out of the three link tags to the right side?

This is the code snippet I am currently working with: <table> <tr> <td>&nbsp;</td> <td> <a id="btnAutoSuggest">Suggest Title</a> <a id="btnOK">OK</a> <a id ...

CSS animation: Final position once the vertical text has finished scrolling

I have designed a CSS-animated headline with a leading word and three vertically-scrolling/fading statements to complete the sentence, inspired by the style used on careers.google.com. The animation runs through three cycles and stops, leaving the third st ...

Scroll upwards within a nested div

Is there a way to smoothly animate the content of the inner div upward without requiring any button clicks? Also, is there a method to trigger an event once the animation has completed? ...

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

Utilizing pixel values for Material-UI breakpoints rather than using the default sm, md, lg, xl options

Below is the code snippet that I am using: [theme.breakpoints.only('lg')]: {} The above code works perfectly and shifts at the desired breakpoint. However, when I implement the following: [theme.breakpoints.between('1200', '1021&a ...