Unusual Conduct when Interacting with ContentEditable Text

Looking for help with a strange issue that I can't seem to figure out. Hopefully someone has encountered this before and might have a solution.

In my Angular app, I'm using a contenteditable <div> for inputting content, which is working fine except for one thing. When a user types a number followed by either an a or an o, the following letter gets superscripted. For example:

1a appears as 1ª / 2o appears as 2º

I've tested this in Chrome, Safari, Firefox, and Opera, and it happens consistently across all of them.

There are no extra characters or HTML stored in the database table, and when I look at the source, the 1a displays as expected. This only occurs with a number followed by either an a or an o; all subsequent characters display correctly.

Additional Information: The database where the content is saved is MySQL with UTF-8-MB4 encoding. Could this be causing the issue? However, when I check the data in the table, it's stored as expected.

htmlmysqlangularcontenteditable

Answer №1

It appears that the issue you are experiencing is due to a CSS class or inline style affecting ordinal numbers. To resolve this, you can add the following CSS code to your contenteditable styles:

[contenteditable], [contenteditable] * {
    font-variant-numeric: normal!important;
}

To better understand how this works, I have provided a working example below. The use of the css classes .ordinal and @font-face may be causing the problem. A demonstration with the class removed-ordinal showcases how to implement font-variant-numeric: normal.

@font-face {
  font-family: 'Source Sans Pro';
  src: url("https://mdn.github.io/css-examples/font-features/SourceSansPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
.ordinal {
  font-variant-numeric: ordinal;
  font-family: "Source Sans Pro";
}
.removed-ordinal /*,[contenteditable] *, [contenteditable] */ {
  font-variant-numeric: normal;
}
<div class="body-parent-which-inherits-ordinal-to-childrens ordinal">
    <div contenteditable>1a, 2o</div>
    <div contenteditable class="removed-ordinal">1a, 2o</div>
</div>

In the provided example, text added to the first div results in non-cap characters being displayed in ordinal form due to the font's settings. It is suggested to educate yourself on OpenType standards and how specific glyphs like ordn impact ordinals when using fonts.

Additional solutions to address the issue:

  1. Remove any existing @font-face declarations from your CSS.
  2. Change your font-family to one without ordinal support (e.g., font-family: serif;).

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

I am having trouble setting up XAMPP on my computer

I recently set up Xampp on my computer, but encountered an issue when trying to access http://localhost/phpmyadmin/. An error message appeared stating: Error MySQL said: Documentation 2002 - No connection could be made because the target machine activel ...

phpmysqlphpmyadminxampp

AbstractControl is missing the 'controls' property in Angular4

Many blogs have discussed this error, but none specifically for angular4. I am dynamically adding and removing controls on the form. Add controls to the form during initialization ngOnInit() { this.lienHolder = this._fb.group({ ...

angularangular4-forms

Tips for ensuring a div stays centered while resizing the window

When I resize the window, the div tab on the right side of the screen moves to the bottom right. How can I make it stay in the middle regardless of screen size? I've tried using margin-left:auto and margin-right:auto but it didn't work. Changing ...

javascripthtmlcss

Tips for expanding an input to fit the width of a div without altering the dimensions of a preceding span element

Let me explain, I have a form that includes a span and an input: <form onSubmit={e => handleSubmit(e)}> <Box className='form_box'> <span> <a href="/cd ...

htmlcssreactjsmaterial-ui

Having trouble with CSS3 radio buttons not functioning properly on Firefox?

Does anyone know why my CSS3 pseudo elements are working fine in Chrome, but reverting back to default styling in Firefox for my radio button? Any suggestions? Check out this JSFIDDLE link for reference: JSFIDDLE Here is the HTML code snippet: <input ...

htmlcssfirefoxradio-button

Obtaining User Input in React JS within the Fetch Statement

I've written a code to fetch weather data from an API. Currently, the location is set to "chennai" in the link provided. I'd like to make this location user-dependent. How can I achieve this using React? import React,{useState,useEffect} from ...

htmlreactjsapi

Failed to select mySql database using easyphp with error message "Database selection failed."

Recently delving into the world of PHP programming, I am seeking assistance with database selection code for MySQL within PHP. After creating a database named "admin" through phpMyAdmin, I noticed the name displayed as "[email protected]". To establis ...

phpmysqlmysqli

Trouble with reading from a newly generated file in a node.js program

Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...

javascripthtmljsonnode.jsexpress

CSS Flexbox: Achieving Perfect Alignment for a Responsive Hamburger Navbar

This is a specific inquiry that requires your attention To begin, kindly execute the code in fullscreen mode Inspect the code and adjust it to fit within a mobile width (there seems to be an issue with responsiveness) Next, open the hamburger menu As show ...

htmlcssflexbox

When an element is dragged within the mcustomscrollbar container, the scroll does not automatically move downward

I am facing an issue where I have multiple draggable elements inside a Scrollbar using the mcustomscrollbar plugin. When I try to drag one of these elements to a droppable area located below the visible area of the scroller, the scroll does not automatical ...

javascripthtml

When inserting a page break after a section, it seamlessly flows to the next page during printing

When should the CSS properties page-break-after: always or before be used? I have tried various methods, such as creating different div elements for page-break, adjusting float and clear:both, but have not had any success. There are currently four section ...

htmlcssgoogle-chrome

The optimal method for handling connections to a MySQL database in NodeJS using ExpressJS

Currently, I'm in the process of building an application using ReactJS / NodeJS + ExpressJS. I've been facing some challenges with managing database connections efficiently. While the code is functional, I have observed a steady increase in the ...

mysqlnode.jsreactjsexpressmariadb

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

javascripthtmljquerycsshtml5-canvas

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

javascriptjqueryhtmlcssajax

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

I am looking to incorporate a user input section on my website similar to the one found in WordPress for creating new posts. I would like this area to have all of the same tools available, such as adding hyperlinks, bolding text, and uploading images. Ca ...

javascripthtmlcsswebuser-input

"Using jQuery's animate() function to dynamically change text content

I'm currently venturing into the world of jQuery animate() and decided to create a presentation-style project for practice. However, I've hit a roadblock when attempting to alter the text within my div element in the midst of an animation utilizi ...

javascriptjqueryhtmlanimationjquery-animate

Creating responsive images using Bootstrap CSS framework

I have been focusing on optimizing the banner below the navigation menu on this website. My goal is to make it responsive so that the player in the banner remains visible even when scaling down to iPhone size portrait. You can find the code for this secti ...

htmlcsstwitter-bootstrapresponsive

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...

javascripthtmlcssgoogle-chromeinternet-explorer

Unexpected behavior with the ion-datetime time picker on an Android device

I am encountering challenges with a Date and Time entry feature in my Angular/Ionic application that involves date pickers. When I tap on the Time field, the time picker opens. Everything works perfectly in my browser - I can select a time, spin the value ...

androidangularionic-frameworkdatepicker

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

csshtml