In Chrome, CSS automatic hyphens are displayed as question mark symbols

On my website, I have implemented automatic hyphenation using CSS:

article > p,
article > li {
  -o-hyphens: auto;
  -o-hyphenate-limit-before: 3;
  -o-hyphenate-limit-after: 3;
  -o-hyphenate-limit-chars: 6 3 3;
  -o-hyphenate-limit-lines: 2;
  -o-hyphenate-limit-last: always;
  -o-hyphenate-limit-zone: 8%;

  // Other browser prefixes and hyphenation properties

}

The hyphenation seems to work fine in Safari and Firefox as shown in the images below:

https://i.stack.imgur.com/LUVEM.jpg

However, it is not working as expected in Chrome and Opera as seen here:

https://i.stack.imgur.com/CIGSW.jpg

I am using Gatsby JS for my website, and UTF-8 encoding is correctly set up.

Upon researching the issue, I found similar problems faced by others. However, I could not find anyone experiencing this specific issue only in Chromium browsers.

CSS hyphenation typically functions better in Safari and Firefox, but the difference in behavior across browsers is unexpected. What could be causing this issue and how can it be resolved? Why is this happening exclusively in Chromium browsers?

htmlcssreactjs

Answer №1

If you're looking for answers to questions like this, a fantastic resource to check out is the website known as caniuse. For this particular inquiry, follow this link:

https://caniuse.com/css-hyphens

To address your specific issue, consider adjusting the lang attribute in your html tag.

<html lang="sv">

Ensuring the correct lang attribute is set is crucial for proper functionality of language features across various web browsers.

For further insights on hyphenation and language settings, explore this informative article: https://www.quirksmode.org/blog/archives/2012/11/hyphenation_wor.html

In relation to Chromium experiencing this issue while other browsers do not, it is likely due to how each browser handles language values - with Chromium potentially not syncing them from the operating system. This behavior aligns with Chromium's approach of maintaining independence from its environment, making it a popular choice for testing compatibility.

Answer №2

It appears that the issue is due to a bug in Chromium on macOS, rather than any errors in my code.

Answer №3

In case this issue appears on Mac only and not on other platforms, it could possibly be related to . If not, I suggest reporting the problem at for assistance.

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

Error: Attempting to assign a value to 'onclick' property of null object [Chrome Extension]

window.onload = function() { document.getElementById('item_save').onclick = function() { var item_name = document.getElementById('item_name').value; var item_size = document.getElementById('item_size').value; v ...

javascripthtmlgoogle-chrome-extension

Tracking a user's path while redirecting them through various pages

Recently, I created a website with a login page and a home page using nodejs, javascript, and html. The client side sends the entered username and password to the server, which then replies based on the validation result. During navigation between pages, h ...

javascripthtmlnode.js

Developing a versatile table component for integration

My frontend app heavily utilizes tables in its components, so I decided to create a generic component for tables. Initially, I defined a model for each cell within the table: export class MemberTable { public content: string; public type: string; // ...

htmlangulartypescript

Is it possible to utilize the Session Object and Session ID for authentication in REST API and RectJS?

We are looking to transition our current web application (which relies on an HTTP API) to a REST service model with ReactJS for the frontend. In our current setup, we heavily rely on the Session object to store and process data. Will it be feasible to co ...

reactjsspringrestspring-mvc

Several modules with names that are similar but differ only in casing, as instructed in the manual

Hey there! I'm currently in the process of setting up a basic React project with AWS Amplify, following this guide: AWS Setup At the end of the guide, it instructs me to copy and paste the code below into my index file, just after the last import sta ...

node.jsreactjsamazon-web-serviceswebpackaws-amplify

I must arrange each item in a column vertically, regardless of whether they could align horizontally

As the title suggests, I am looking for a way to stack one element under another, similar to a chat application. Currently, when the message is long, it displays correctly, but if the text fits next to each other, it aligns in that manner. I require a solu ...

cssvue.js

Ways to ensure the React prop type matches the value provided when using typescript?

Within my List component, there are 2 props that it takes in: items = an array of items component = a react component The main function of the List component is to iterate over the items and display each item using the specified component. // List ...

reactjstypescriptnext.js

Rounded Corners on an HTML5 Canvas Triangle

Hi there, I'm relatively new to working with HTML5 Canvas and I'm currently attempting to create a triangle with rounded corners. So far, I've experimented with: ctx.lineJoin = "round"; ctx.lineWidth = 20; However, I haven't been suc ...

javascripthtmlcanvas

Redux - Refreshing the subtree state

How can I properly reset the subtree of a redux store without resetting the entire store? I want to target only the reducer subtree in question. Check out this example code: //initial state const initialState = { isFetching: false, error: '& ...

javascriptreactjsreduxreact-redux

Using the glob function within a PHP include statement to search through numerous web directories

Greetings to all readers, this is my first time posting here. I have limited experience with PHP and would appreciate your patience as I navigate through it. I manage a large static website that heavily relies on PHP includes for various sections like hea ...

phphtmlincludeglob

Can you help me figure out how to configure my page so that pressing the Enter key does not trigger a postback action?

I'm encountering an issue on one of my asp web pages with a textbox. I am using jQuery to display content in the textbox above it when the user hits the Enter key. However, it always triggers a postback, causing the displayed content to disappear imme ...

jqueryhtml

How can you fix a navbar that won't stay in place?

I'm facing an issue with this example: When I scroll, the navbar moves along due to the fixed property, which affects the overall look. How can I make it disappear when scrolling, while keeping the logo intact? Can someone suggest if this layout is ...

htmlcss

Retrieve unique elements from an array obtained from a web API using angular brackets

I've developed a web application using .NET Core 3.1 that interacts with a JSON API, returning data in the format shown below: [ { "partner": "Santander", "tradeDate": "2020-05-23T10:03:12", "isin": "DOL110", "type ...

htmlangulartypescript

Encountering a React Router issue with URL parameters affecting loaders

In my React project, I am utilizing React-router to create a movie page. The code snippet for the movie page is as follows: import axios from 'axios'; import React from 'react'; import { useLoaderData } from 'react-router-dom' ...

reactjsexpressreact-routerfrontendmern

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

Currently, I am attempting to implement the code for ramjet from . However, I am facing an issue where element a does not disappear when transitioning into b. Additionally, I am encountering an error message "--Uncaught TypeError: Cannot read property &apo ...

javascriptjqueryhtmlcss

Achieving nested classes in CSS: a comprehensive guide

I am encountering an issue with my CSS while trying to create a dropdown on hover. The problem seems to be related to nested classes inside a div structure. It appears that the dropdown list is not displaying properly, leading me to believe there might be ...

htmlcss

Enhancing user experience with dynamically resized Jumbotron images based on screen sizes in HTML

I am experiencing an issue with the jumbotron images on my website where they become increasingly zoomed in as the screen size decreases, and are extremely zoomed in on mobile devices. Is this a normal behavior of jumbotrons? I do understand that the image ...

javascripthtmlcssimageparallax

Invisible Thinglink image revealed upon resizing browser

I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...

javascripthtmlcssajax

Dropping and dragging in the Dojo for the nested lists

Within my HTML code, I am using the Dojo drag and drop feature to sort attributes and move them to another section. However, I am having trouble figuring out how to sort the sections themselves. Here is the structure that I have created: <ul accept=" ...

javascripthtmlcssdojodrag-and-drop

Error encountered when attempting to display a particular user with a specific _id in MongoDB, Node, and React: Failed to convert value "undefined" to ObjectId in the "user" model

I am experiencing an issue on my page where multiple users are displayed. Whenever I click on a user, it should redirect me to their individual page, but instead, I encounter the following error: Cast to ObjectId failed for value "undefined" at path "_id" ...

javascriptnode.jsreactjsmongodbmongoose