Моя семья шрифтов не может отображать "прямые кавычки". Что мне делать?

Question

Я использую звонок из семейства шрифтов Google "Palanquin". К сожалению, у Паланкина нет возможности выводить прямые кавычки (одинарные и двойные). Вместо этого он отображает все прямые кавычки как закрывающие кавычки.

Это означает, что если пользователь введет «this» в текстовую область, оно будет отображено как «this». Увидеть разницу? Чтобы увидеть это лучше, напишите прямые кавычки здесь:

https://fonts.google.com/?query=palanquin

Насколько я знаю, это проблема только в компьютерных веб-браузерах. На iPhone это не проблема, так как iOS разумно преобразует прямые кавычки в соответствующие фигурные кавычки в качестве пользовательских типов (аналогично MS Word). Я не тестировал на Android.

Я открыт для всех предложений о том, как это исправить. У меня есть одна мысль - использовать JavaScript, чтобы обернуть все прямые кавычки в промежуток с классом, использующим другое семейство шрифтов. Примерно так:

var userValue = textarea.value
var changedValue = userValue.replace(/"/g, "<span class=\"differentFontFamily\">\"</span>")

Но это неправильно вставляет мой HTML. Он просто выводит строку с видимым HTML в нем.

Пожалуйста, помогите! Спасибо!

Answer 1

Вот примеры фрагментов кода с методом замены строк. Вы можете улучшить это как функцию, если вам нужно использовать ее вообще. :)

var ele = document.getElementById('quoteReplace');
var nEle = ele.innerHTML.replace(/"/g, "<span class='newFontStyle'>\"</span>");
ele.innerHTML = nEle;

@import url('https://fonts.googleapis.com/css?family=Palanquin&display=swap');
body{
  font-family: 'Palanquin', sans-serif;
  font-size: 28px;
}
.newFontStyle{
  font-family: Arial, Helvetica, sans-serif;
}

<div id="quoteReplace">This is an "Example quote" with paragraph.</div>

Answer 2

Семейство шрифтов, которое вы получили в виде прямых кавычек, если вы хотите, чтобы прямые кавычки меняли шрифт.

Answer 3

Я нашел решение, которое достаточно хорошо для меня. Когда пользователь вводит прямую кавычку с пробелом перед ней, я предполагаю, что он хотел бы, чтобы это была открытая кавычка, поэтому я изменяю ее на следующую:

var userValue = e.target.value
var changedValue = userValue.replace(/\ "/g, " “")

Answer 4

Причина, по которой вы видите HTML, заключается в том, что текстовые области поддерживают только простой текст.

Я предлагаю вам использовать contenteditable div, в который можно вставлять теги HTML, чтобы они не отображались. up.

HTML

<div contenteditable="true" id="myDiv">Type text here...</div>

и Javascript для замены кавычек:

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = myDiv.innerHTML.replace(/"/g, "<span class=\"differentFontFamily\">\"</span>");