Мобильная версияНо хотя это частично меня подводит (и еще много работы остается над проектированием компонентов так называемых «эластичных» глифов, таких как ⎧ ⎨ ⎩ ⎫ ⎬ ⎭ ⎪ ⎮ и т. д.), я не уверен, что это лучший способ переопределить использовать стили, специфичные для KaTeX, в каждом случае и сделать так, чтобы все случаи/уравнения/символы выглядели более-менее прилично с точки зрения дизайна.
Для справки: растягивающаяся скобка/круглая скобка/и т. д. глифы в одном примере выглядят примерно так (нашел это где-то в Интернете, посвященном математическому рендерингу LaTeX, именно так он ДОЛЖЕН выглядеть, а не то, что обязательно делает KaTeX):
Вот что KaTeX выглядит по умолчанию, несколько примеров опробовано здесь:
Но даже не вдаваясь в подробности путь вниз по кроличьей норе, пытаясь расположить/спроектировать кронштейн/и т. д. glyph части пользовательского моноширинного шрифта (чтобы они выглядели максимально красиво, следуя базовому руководству, приведенному выше), даже просто делать это далеко от идеала (много вещей не так):
Код: Выделить всё
font-family: monospace;
(Я думаю, что все проблемы позиционирования/компоновки "частей" моноширинных глифов для скобок и тому подобного, но если у вас есть опыт, не стесняйтесь присоединиться).
Но основная проблема, которую я задаюсь, заключается в том, во-первых, почему в некоторых случаях используется SVG. случаи? И во-вторых, как мне сделать так, чтобы случаи SVG соответствовали моему собственному моноширинному шрифту??? Вот несколько случаев SVG, которые я видел в KaTeX:
И есть даже одна горизонтальная дробная линия, которая является просто границей-дном
....
По сути, невозможно полностью стилизовать все математические глифы в KaTeX, особенно включая «растягиваемые глифы, связанные с скобками»? (Учитывая, что некоторые из них отображаются как SVG, а некоторые даже как границы CSS)? Или есть какой-то способ сделать это? В частности, я надеюсь, что мой узкоспециализированный моноширинный шрифт будет работать с KaTeX-рендерингом растягивающихся математических символов и тому подобного во всех случаях, если это возможно. (Упор на моноширинность).
Что вы порекомендуете, чтобы хоть как-то решить эту проблему? Я не совсем уверен, что можно сделать с частью SVG (разветвить репозиторий и выполнить тяжелую работу?), может быть, у вас есть какие-нибудь идеи для примера рамки CSS (просто сделайте ее толще? Но даже в этом случае, вероятно, он не будет соответствовать более человечному виду пользовательского моноширинного шрифта, где каждый глиф немного текстурированы на его контурах/линиях, как будто нарисованы ручкой). Цель состоит в том, чтобы все растягивающиеся и другие математические глифы выглядели в основном «последовательными» с точки зрения дизайна. Если это невозможно, это тоже будет полезно знать.
Кстати, это базовый пример HTML с моноширинным шрифтом KaTeX + по умолчанию, если это поможет копаться (все все селекторы CSS, которые мне пришлось переопределить, чтобы избавиться от стандартных семейств шрифтов KaTeX):
Код: Выделить всё
const mathExamples = [];
// Parentheses (⎛ ⎜ ⎝ ⎞ ⎟ ⎠)
mathExamples.push(
"\\left( \\begin{matrix} a \\\\ b \\\\ c \\\\ d \\\\ e \\end{matrix} \\right)"
);
mathExamples.push("\\left( \\frac{a+b}{c+d} \\right)");
mathExamples.push("\\big( x+y \\big)");
mathExamples.push("\\Big( x+y \\Big)");
mathExamples.push("\\bigg( x+y \\bigg)");
mathExamples.push("\\left\\lceil \\frac{a}{b} \\right\\rceil");
// Square brackets (⎡ ⎢ ⎣ ⎤ ⎥ ⎦)
mathExamples.push(
"\\left[ \\begin{matrix} 1 \\\\ 2 \\\\ 3 \\\\ 4 \\\\ 5 \\end{matrix} \\right]"
);
mathExamples.push("\\left[ \\frac{x}{y} + z \\right]");
mathExamples.push("\\left[ x + y \\right]");
// Curly braces (⎧ ⎨ ⎩ ⎫ ⎬ ⎭ ⎪ ⎮)
mathExamples.push(
"\\left\\{ \\begin{matrix} x=1 \\\\ y=2 \\\\ z=3 \\end{matrix} \\right\\}"
);
mathExamples.push(
"\\left\\{ \\begin{array}{ll} a & b \\\\ c & d \\\\ e & f \\end{array} \\right\\}"
);
mathExamples.push(
"\\left\\{ \\begin{matrix} a \\\\ b \\\\ c \\end{matrix} \\right\\}"
);
mathExamples.push(
"\\left\\{ \\begin{matrix} a &\\text{if } x>0 \\\\ b &\\text{if } x\\le 0 \\end{matrix} \\right."
);
// Angle brackets (〈 〉)
mathExamples.push("\\left\\langle a, b \\right\\rangle");
mathExamples.push(
"\\left\\langle \\frac{x}{2}, \\frac{y}{3} \\right\\rangle"
);
// Ceilings and Floors (⌈ ⌉ ⌊ ⌋)
mathExamples.push("\\left\\lceil \\frac{x}{2} \\right\\rceil");
mathExamples.push("\\left\\lfloor \\frac{x}{2} \\right\\rfloor");
mathExamples.push(
"\\left\\lceil x+y \\right\\rceil - \\left\\lfloor x-y \\right\\rfloor"
);
// Vertical bars and double bars (⎪ ⎮ ∣ ∥)
mathExamples.push("\\left| x+y \\right|");
mathExamples.push("\\left\\| A \\right\\|");
mathExamples.push(
"\\left| \\begin{matrix} a & b \\\\ c & d \\end{matrix} \\right|"
); // determinant
mathExamples.push(
"\\left\\| \\begin{matrix} a & b \\\\ c & d \\end{matrix} \\right\\|"
);
// Integrals (⌠ ⌡ ⎲ ⎳ ∫ ∮ ∯)
mathExamples.push("\\int_0^1 f(x)\\,dx");
mathExamples.push("\\iint_D f(x,y)\\,dx\\,dy");
mathExamples.push("\\iiint_V f(x,y,z)\\,dV");
mathExamples.push("\\oint_C \\vec{F}\\cdot d\\vec{r}");
mathExamples.push("\\left. \\int_a^b f(x)\\,dx \\right|_a^b"); // shows ⌠ and ⌡ region use
// Summation / Product symbols (⎰ ⎱)
mathExamples.push("\\sum_{i=1}^{n} i^2");
mathExamples.push("\\prod_{i=1}^{n} (x_i + 1)");
mathExamples.push("\\bigcup_{i=1}^{n} A_i");
mathExamples.push("\\bigcap_{i=1}^{n} A_i");
// Mixed multi-part constructs
// Braces and bars
mathExamples.push(
"\\left\\{ \\begin{matrix} a &\\text{if } x>0 \\\\ b &\\text{if } x\\le 0 \\end{matrix} \\right\\|_{x=1}"
);
// Nested brackets
mathExamples.push("\\left( \\left[ \\frac{a}{b} \\right] \\right)");
// Integral with delimiters
mathExamples.push("\\left( \\int_0^\\infty e^{-x^2}\\,dx \\right)");
// Sum inside brackets
mathExamples.push("\\left[ \\sum_{i=1}^{n} i^2 \\right]");
// Special combinations for testing top/bottom pieces
mathExamples.push(
"\\left\\{ \\begin{matrix} a \\\\ b \\\\ c \\\\ d \\\\ e \\\\ f \\\\ g \\\\ h \\end{matrix} \\right\\}"
);
mathExamples.push("\\overbrace{a + b + c + d + e}^{\\text{sum}}");
mathExamples.push("\\underbrace{a + b + c + d + e}_{\\text{sum}}");
mathExamples.forEach((src) => {
const div = document.createElement("div");
katex.render(src, div, { displayMode: true });
document.getElementById("math-tests").appendChild(div);
});Код: Выделить всё
.katex {
font-family: monospace;
}
.katex .mathdefault,
.katex .mathnormal,
.katex .mathit,
.katex .mathrm,
.katex .boldsymbol,
.katex .mathbf,
.katex .amsrm,
.katex .mathbb,
.katex .mathcal,
.katex .mathfrak,
.katex .mathtt,
.katex .mathscr,
.katex .mathsf,
.katex .text,
.katex .textsf,
.katex .texttt,
.katex .textrm {
font-family: monospace;
}
.katex .size1,
.katex .size2,
.katex .size3,
.katex .size4 {
font-family: monospace;
}
.katex .delimsizing.size1,
.katex .delimsizing.size2,
.katex .delimsizing.size3,
.katex .delimsizing.size4 {
font-family: monospace;
}
.katex .delimsizing.mult .delim-size4 > span {
font-family: monospace;
}
.katex .nulldelimiter {
font-family: monospace;
}
.katex .op-symbol,
.katex .op-symbol.small-op,
.katex .op-symbol.large-op {
font-family: monospace;
}
#math-tests {
display: flex;
flex-wrap: wrap;
gap: 1em;
align-items: flex-start;
}
#math-tests > div {
margin: 0;
}Код: Выделить всё
Также не совсем уверен, нужно ли мне создавать «варианты размера» моих моноширинных шрифтов, чтобы они каким-то образом соответствовали размеру 1-4, который, кажется, есть у шрифтов KaTeX. Но я могу сначала разобраться в этом сам, прежде чем официально спрашивать об этом более подробно в какой-то момент в будущем.
Подробнее здесь: https://stackoverflow.com/questions/798 ... oks-nice-o
