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

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

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

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.

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


javascript html google-fonts textarea quotes
person ZigZagZak    schedule 30.01.2020    source источник

Ответы (4)


arrow_upward
0
arrow_downward

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

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

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>");
person jkrei0    schedule 30.01.2020

arrow_upward
0
arrow_downward

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

person derek    schedule 30.01.2020

arrow_upward
0
arrow_downward

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

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>

person nadun    schedule 31.01.2020

arrow_upward
0
arrow_downward

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

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