LaTeX-inspired utility classes #4

New issue

Open

opened 2025-10-14 15:48:39 -06:00 by navan · 0 comments

navan commented

2025-10-14 15:48:39 -06:00

Owner

Originally created by @vincentdoerig on 2/16/2025

I noticed that a few LaTeX inspired utility classes would be a good addition to recreate common LaTeX type and spacing commands. The nomenclature is inspired by Tailwind CSS while maintaining the semantic meaning of LaTeX commands. This would allow users to quickly apply LaTeX-like styling without writing custom CSS.

Class	CSS Styles	LaTeX Analogy
`.text-justify`	`text-align: justify;`	Default LaTeX paragraph
`.text-right` or `.text-ragged-right`	`text-align: right;`	`\raggedright` (default from #79)
`.text-left` or `.text-ragged-left`	`text-align: left;`	`\raggedleft`
`.text-center`	`text-align: center;`	`\centering`

`.text-tiny`	`font-size: ??;`	`\tiny`
`.text-scriptsize`	`font-size: ??;`	`\scriptsize`
`.text-footnote`	`font-size: ??;`	`\footnotesize`
`.text-small`	`font-size: ??;`	`\small`
`.text-large`	`font-size: ??;`	`\large`
`.text-xlarge`	`font-size: ??;`	`\Large`

`.vspace-sm`	`margin-top: 1em; margin-bottom: 1em;`	`\vspace{1em}`
`.vspace-md`	`margin-top: 2em; margin-bottom: 2em;`	`\vspace{2em}`

`.cols-2`	`column-count: 2;`	`\begin{multicols}{2}`
`.cols-3`	`column-count: 3;`	`\begin{multicols}{3}`

`.font-sans`	`font-family: var(--font-sans);`	`\textsf{text}`
`.font-mono`	`font-family: var(--font-mono);`	`\texttt{text}`

`.indent-pars`	`text-indent: var(--text-indent-size);`	Default paragraph indent (already in library)
`.no-indent`	`text-indent: 0;`	`\noindent` (already in library)

`.list-alpha`	`list-style-type: lower-alpha;`	`\begin{enumerate}[a)]`
`.list-roman`	`list-style-type: lower-roman;`	`\begin{enumerate}[i)]`

I will try to find the right values for the text sizing.

I'm open to discuss adding more spacing utilities (e.g. hspace-*) or other common commands that would benefit from having a utility class.

*Originally created by @vincentdoerig on 2/16/2025* I noticed that a few LaTeX inspired utility classes would be a good addition to recreate common LaTeX type and spacing commands. The nomenclature is inspired by Tailwind CSS while maintaining the semantic meaning of LaTeX commands. This would allow users to quickly apply LaTeX-like styling without writing custom CSS. | Class | CSS Styles | LaTeX Analogy | |-------|------------|---------------| | `.text-justify` | `text-align: justify;` | Default LaTeX paragraph | | `.text-right` or `.text-ragged-right` | `text-align: right;` | `\raggedright` (default from #79) | | `.text-left` or `.text-ragged-left` | `text-align: left;` | `\raggedleft` | | `.text-center` | `text-align: center;` | `\centering` | | | | | | `.text-tiny` | `font-size: ??;` | `\tiny` | | `.text-scriptsize` | `font-size: ??;` | `\scriptsize` | | `.text-footnote` | `font-size: ??;` | `\footnotesize` | | `.text-small` | `font-size: ??;` | `\small` | | `.text-large` | `font-size: ??;` | `\large` | | `.text-xlarge` | `font-size: ??;` | `\Large` | | | | | | `.vspace-sm` | `margin-top: 1em; margin-bottom: 1em;` | `\vspace{1em}` | | `.vspace-md` | `margin-top: 2em; margin-bottom: 2em;` | `\vspace{2em}` | | | | | | `.cols-2` | `column-count: 2;` | `\begin{multicols}{2}` | | `.cols-3` | `column-count: 3;` | `\begin{multicols}{3}` | | | | | | `.font-sans` | `font-family: var(--font-sans);` | `\textsf{text}` | | `.font-mono` | `font-family: var(--font-mono);` | `\texttt{text}` | | | | | | `.indent-pars` | `text-indent: var(--text-indent-size);` | Default paragraph indent (already in library) | | `.no-indent` | `text-indent: 0;` | `\noindent` (already in library) | | | | | | `.list-alpha` | `list-style-type: lower-alpha;` | `\begin{enumerate}[a)]` | | `.list-roman` | `list-style-type: lower-roman;` | `\begin{enumerate}[i)]` | I will try to find the right values for the text sizing. I'm open to discuss adding more spacing utilities (e.g. `hspace-*`) or other common commands that would benefit from having a utility class.