Мне нужно создать немного стилизованный текст, который не отображает определенный символ визуально, но содержит , содержащий символ для других целей.Например, пользовательский интерфейс может отображать что-то вроде <sup><sub>$</sub></sup>123<sup><sub>45</sub></sup>, но основной текст на самом деле $123.45.
- Если вы выберите отображаемый текст и Ctrl + C , буфер обмена должен фактически содержать нижележащий текст.
- Если вы выделите отображаемый текст и щелкните правой кнопкой мыши, контекстное меню должно иметь опцию вдоль строк
Search Google for "<em>X</em>", где X - это основной текст (при условии, что браузер его поддерживает). - Как программы чтения с экрана, так и веб-сканеры должны «видеть» базовый текст.
Вот мое текущее решение:
body {
font-family: sans-serif;
}
.price {
line-height: 4.4rem;
font-size: 4rem;
}
.cc, .cf {
font-size: 0.6em;
vertical-align: super;
margin: 0 2px;
}
.cs {
opacity: 0;
margin: 0 0 0 -.28em;
}
.ci {
font-size: 4.4rem;
}
<span class="price" aria-label="$123.45">
<span class="cc">$</span><span class="ci">123</span><span class="cs">.</span><span class="cf">45</span>
</span>
Однако я не уверен, что наличие невидимого (opacity: 0) элемента действительно лучший способ сделать это - он чувствует себя немного закулисным ивозможно, некоторые умные сканеры тоже могут это увидеть.Кроме того, -.28em не является масштабируемым - это лучшее число, которое я могу найти, чтобы выглядеть хорошо, и мне пришлось бы настроить его для различных шрифтов или размеров шрифтов.
Я мог бы изменить .cs наdisplay: inline-block; width: 0, чтобы обойти проблему margin, но затем, если вы дважды щелкнете по 123, чтобы выбрать слово или трижды щелкните, чтобы выбрать блок, 45 не будет выбран.Поэтому сохранение .cs в строке кажется важным для обеспечения того, чтобы весь текст обрабатывался как один непрерывный фрагмент текста.
Поэтому мой вопрос заключается в том, как использовать HTML5 и CSS, каков семантически правильный способ иметь разный контентчто выбирается, чем то, что отображается?