Magick CSS, который по-разному применяется к каждому символу строки
(Вопреки видимому, это не вопрос LaTeX.)
Чтобы правильно отобразить с помощью HTML логотип \LaTeX:
можно использовать следующий ввод HTML:
<span class = "LATEX">L<span class = "A">A</span><span class = "TEX">T<span class = "E">E</span>X</span></span>
и следующий код CSS:
span.TEX {letter-spacing: -0.125em; margin-right:0.125em;}
span.TEX span.E{ position:relative;top:0.5ex;left:-0.0417em;}
a span.TEX span.E {text-decoration: none; }
span.LATEX span.A{ position:relative; top:-0.5ex; left:-0.4em; font-size:85%;}
span.LATEX span.TEX{ position:relative; margin-left: -0.4em; margin-right:0.125em; }
Есть ли способ получить тот же результат с более коротким вводом HTML, например, в следующем псевдокоде:
<span class = "LATEXLogo">LaTeX</span>
и следующий код CSS:
span.LATEXLogo { something magick }
Отвечает ли это на ваш вопрос? Можно ли разделить строку с помощью css, чтобы отображать ее как отдельные слова
@A.Meshu Я не вижу возможности применить связанный вопрос к текущему.
Вы разделяете каждый символ в элементе, поэтому используйте . в регулярном выражении вместо просмотра вперед. При этом вы можете перебирать и применять стили к каждому персонажу.
@user3783243 user3783243 Извините, но это выходит за рамки моей компетенции.
@DenisBitouzé, как указано, css не может этого сделать. Ваша разметка отличается, но это тот же вопрос.
Ответы 2
.latex sub, .latex sup {
text-transform: uppercase;
}
.latex sub {
vertical-align: -0.5ex;
margin-left: -0.1667em;
margin-right: -0.125em;
}
.latex, .latex sub {
font-size: 1em;
}
.latex sup {
font-size: 0.85em;
vertical-align: 0.15em;
margin-left: -0.36em;
margin-right: -0.15em;
}<span class = "latex">L<sup>a</sup>T<sub>e</sub>X</span></p>Другой вариант, без всяких css/html, с использованием MathJax cdn:
<script type = "text/javascript" async src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML"> </script>
\(\rm\LaTeX\)Хороший! Но возможно ли это с чем-то еще более простым: <span class = "latex">LaTeX</p>?
Нет, поскольку вам нужно нацеливаться на каждого отдельного персонажа, использование <sub> и <sup> — самый простой способ.
@DenisBitouzé, это возможно, но с помощью javascript.
@sergeykuznetsov Почему не с javascript?
Что касается опции javascript, возможно ли получить этот логотип напрямую, не полагаясь на математический режим LaTeX (\(...\)), и иметь возможность просто написать \LaTeX?
От себя могу предложить решение для javascript.
Здесь каждый символ заключен в отдельный тег <inside>. Далее с помощью pseudo-classes в css можно обращаться к четным и не четным буквам в слове:
inside:nth-child(odd) {
/*your styles*/
}
inside:nth-child(even) {
/*your styles*/
}
Или вы можете назначить уникальные стили для каждой буквы слова. Так:
inside:nth-child(1) {
/*your styles*/
}
inside:nth-child(2) {
/*your styles*/
}
...
inside:nth-child(5) {
/*your styles*/
}
window.onload = function() {
let text = document.querySelector('.LATEXLogo');
let inside = '';
for (i = 0; i < text.innerText.length; i++) {
if (text.innerText[i] !== " ") {
inside += "<inside>";
inside += text.innerText[i];
inside += "</inside>";
}
}
text.innerHTML = inside;
}inside:nth-child(odd) {
color: red;
}
inside:nth-child(even) {
color: green;
}<span class = "LATEXLogo">LaTeX</span>Действительно, просто вопрос пропажи window.onload :)
@DenisBitouzé, рад помочь :)
Что ж, если количество вхождений <span class = "LATEXLogo">LaTeX</span>> 1, только первое отображается, как и ожидалось.
@DenisBitouzé, да. И чтобы применить это ко многим вхождениям, вам нужно изменить вызов селектора. Вот так - document.querySelectorAll. И это не единственное изменение в коде, которое необходимо сделать.
@DenisBitouzé, вам нужна помощь в написании кода для многих <span class = "LATEXLogo">LaTeX</span>?
@DenisBitouzé, хорошо :) Если у вас возникнут трудности или вопросы, дайте мне знать, пожалуйста.
Это примерно тот же вопрос, stackoverflow.com/questions/29467540/….