Отдельные буквы Kern с JavaScript (с использованием сгенерированного контента) - PullRequest
Новая
       10

Отдельные буквы Kern с JavaScript (с использованием сгенерированного контента)

2 голосов
/ 15 февраля 2020

У меня есть якорный тег, который генерируется с помощью Wordpress из базы данных, и шрифт, используемый клиентом, имеет плохой кернинг. Мне нужно иметь возможность выбрать отдельные буквы в ссылке привязки и добавить значение margin-right CSS к определенным буквам в сгенерированном тексте.

Как бы я go выбрал 2-ю, 3-ю, 4-ю букву и c текста с помощью Javascript, а затем добавил значение для поля справа? Я действительно не знаю, с чего начать? 

var anchorTag = document.querySelectorAll(".taxonomy a");

ПРИМЕЧАНИЕ - у меня нет доступа к HTML, поэтому я не могу обернуть буквы в элементы span и т. Д. c. Мне нужно найти способ выбора отдельных букв с помощью JavaScript, если это возможно.

1 Ответ

0 голосов
/ 15 февраля 2020

Вы можете заключить каждый символ в элемент span с помощью пользовательского класса: 

function wrapCharacters(element, prefix) {
  element.innerHTML = element.textContent
    .split('')
    .map(function(char, index) {
      return '<span class="' + (prefix || 'span') + '_' + index + '">' + char + '</span>';
    })
    .join('');
}

document.querySelectorAll('.taxonomy a').forEach(function(element) {
  wrapCharacters(element);
});
.taxonomy a .span_3 { margin-right: 1px; }
.taxonomy a .span_4 { margin-right: 3px; }
.taxonomy a .span_5 { margin-right: 3px; }
.taxonomy a .span_6 { margin-right: 7px; }
<div class="taxonomy">
   <a href="#">SampleText</a>
</div>

Теперь вы можете получить доступ к отдельным персонажам с помощью CSS, например: 

.taxonomy a .span_0 { margin-right: 1px; }
.taxonomy a .span_1 { margin-right: 4px; }
.taxonomy a .span_2 { margin-right: 2px; }

ES6 Версия 

const wrapCharacters = (element, prefix) =>
  element.innerHTML = element.textContent
    .split('')
    .map((char, index) => `<span class="${prefix || 'span'}_${index}">${char}</span>`)
    .join('');
...