LaTeX-inspired utility classes

[vincentdoerig]

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.

[vihuna]

Regarding, for example, the left alignment, I like .text-ragged-right or text-left; but text-right seems a bit confusing to me.

[vincentdoerig]

Oh, yes of course. I changed the order of the classes and forgot to update the styles..

[andywiecko]

Hi @vincentdoerig,
I think this is a great idea! Additionally, I'd like to propose adding bibliography. In my pages, I use the following:

ol.bibliography > li::marker {
content: "[" counter(list-item) "]\2003";
}

<h2>Bibliografia</h2>
<p>
  <ol class="bibliography">
    <li>
      Some reference.
    </li>
    <li>
      Other reference.
    </li>
  </ol>
</p>

This renders as follows:

I'm not an HTML/CSS expert, but I believe something like this could be also useful for package users.

Best,
Andrzej

[vihuna]

Sorry for insisting on this point, but I still think that the nomenclature chosen for the alignment is confusing. I should have been more specific in my first comment.

The alignment equivalencies are:

• Left alignment: text-align: left; for CSS; and raggedright or begin{flushleft} for LaTeX.
• Right alignment: text-align: right; for CSS; and raggedleft or begin{flushright} for LaTeX.

So in the previous version for left alignment, the classes text-right and text-ragged-right were simultaneously confusing to me, because you didn't know if you were following CSS or LaTeX notation (I would expect text-right to be like in CSS, i.e., for right alignment).

And the current version is confusing, because ragged-right is for left alignment in LaTeX.

Finally, the least bad option, text-left and text-ragged-right for left alignment, could also be confusing for some profane people.

So I vote to rule out LaTeX notation, and use only text-left for left alignment, and text-right for right alignment.

[vihuna]

About the font sizes, for 12pt/16px:

I have taken the font sizes from the file classes.dtx, the Fonts section begins whith line 533 and ends on line 760.

They are defined like

\DeclareRobustCommand\Large{\@setfontsize\Large\@xviipt{22}}

where the second setfontsize argument, \@xiivpt, is the font size (these macros are defined in the file ltfssbas.dtx, lines 2460-2532), and the third one, 22, is the baseline separation.

So

• \@vipt: 6
• \@xpt: 10
• \@viiipt: 8
• \@xipt: 10.95
• \@xivpt: 14.4
• \@xviipt: 17.28
• \@xxpt: 20.74
• \@xxvpt: 24.88

And that means the following font sizes (in LaTeX points) for a 12pt-article:

• small: 10.95pt
• footnotesize: 10pt
• scriptsize: 8pt
• tiny: 6pt
• large: 14.4pt
• Large: 17.28pt
• LARGE: 20.74pt
• huge: 24.88pt
• Huge: 24.88pt

Transforming this values to CSS points and then to rem units, with the function x -> (72 / 72.27 / 12) * x, and rounding them to 3 decimal places:

• small: 0.909rem
• footnotesize: 0.83rem
• scriptsize: 0.664rem
• tiny: 0.498rem
• large: 1.196rem
• Large: 1.435rem
• LARGE: 1.722rem
• huge: 2.066rem
• Huge: 2.066rem

[vihuna]

Hey @andywiecko , y also like the bibliography feature. The easy way in LaTeX is using the environment thebibliograpy (in English, the section title for this environment is "References").
I suppose this should be discussed in a separate issue/PR, but I want to note now some points.

• Probably will be a good idea to also specify the "method" to make the citations (\cite{...}).

• It will be great to support also "textual citations" in some way:

  \begin{thebibliography}{99}
    \bibitem[Mo]{Moore} G.H. Moore. \textit{Zermelos's Axiom of Choice}. Springer-Verlag, New York, 1982.
  \end{thebibliography}

  

• About this implementation you have proposed, I like how it looks. I'm not sure that CSS marker is the best option, because is too limited (you are forced to use a CSS entity for the space), but I have to admit that this implementation is quite concise and effective.

[andywiecko]

Hi, it's me again!

I have another idea that I think could add some nice polish to the package. It would be really cool if the package included a class inspired by $\LaTeX$'s algorithmic package for rendering pseudo-code, something like this:

I've already put together a rough version for my blog post—you can see a live demo here. My implementation is admittedly a bit hacky, but it does the job for now:

<style>
.step {
  counter-increment: step-counter;
  margin-left: 10px;
  margin-top: 0px;
}
.step::before {
    content: counter(step-counter) ": ";
}

.small-caps {
    font-variant: small-caps;
}
</style>

...

<div style="overflow-x: auto; white-space: nowrap; width: 100%;">
<hr style="margin:0px;margin-top: 25px;">
<b id="pseudo-code">Algorithm 1</b> $\alpha$-shape reconstruction
<hr style="margin:0px;">
<div class="step">$\mathcal T \gets $ <span class="small-caps">DelaunayTriangulation</span>$(\text{input points})$</div>
<div class="step"><b>for each</b> triangle $t\in \mathcal T:$</div>
<div class="step"><span style="margin-left: 25px;">$R \gets$ <span class="small-caps">CircumRadius</span>$(t)$ </span></div>
<div class="step"><span style="margin-left: 25px;"><b>if</b> $R^2 > \alpha^{-1}$ </span></div>
<div class="step"><span style="margin-left: 50px;"><span class="small-caps">RemoveTriangle</span>$(t)$</div>
<hr style="margin:0px;margin-bottom:25px;">
</div>

Best,
Andrzej