Odd Behaviour with ContentEditable content

Question

I have an odd issue which for the life of me I cannot understand and hoping that someone has come across this before or may have a solution.

My Angular app is using a contenteditable <div> for the input of content which is working as expected with one exception. If the user types in a number followed by a or o the proceeding letter is superscripted for example:

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

I have tested this in Chrome / Safari / Firefox & Opera and it is consistent across all of them.

There is no additional characters or HTML stored in the database table either and when looking at the source the 1a is output as expected. This only happens with a number and with either a or o as the immediate next character all subsequent characters are as expected.

Subsequent & Added Info The database that the content is being saved into is a MySQL db with a UTF-8-MB4 encoding, would that be causing an issue here. However on looking at the data in the table its is stored as expected.

Answer 1

Certainly, you seem to have a CSS class or inline style with ordinal numbers turned on, adding the following css to your contenteditable styles should fix it:

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

Please check the following working example. The css .ordinal and @font-face is my guess about your issue. I've added the class removed-ordinal as an example of 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>

As you can see in my example, when you write additional text to the first div, all the non-caps characters are written as ordinal text. The reason for that is that the font I'm using has been generated to do so. I recommend you to read about OpenType, for ordinal numbers to work, specific glyphs should be used in the OpenType ordn.

More ways to fix your issue:

1. Remove any @font-face you have in your css.
2. Change your font-family to one that doesn't have ordinals (ex. font-family: serif;)