search

vincentdoerig / latex-css

LaTeX.css is a CSS library that makes your website look like a LaTeX document
https://latex.vercel.app
MIT License
2.74k stars 125 forks source link

feat: adds paragraph first line indentation #50

Closed vihuna closed 1 year ago

vihuna commented 1 year ago

Adds first line indentation for HTML paragraphs by default, like in LaTeX documents.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
latex-css ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 5, 2023 at 8:45PM (UTC)
vincentdoerig commented 1 year ago

Thank you for submitting this PR! The idea of adding support for line indentation is intriguing, but I suggest implementing it as an optional feature rather than the default behaviour. This approach would avoid breaking existing websites that use the library and provide flexibility for users who may not want this behaviour globally. One way to achieve this could be to create a class similar to the latex-dark class, which users can add to the <body> (or <article>?) tag to enable line indentation. What are your thoughts?

vihuna commented 1 year ago

I suggest implementing it as an optional feature rather than the default behaviour. This approach would avoid breaking existing websites that use the library and provide flexibility for users who may not want this behaviour globally.

I totally agree (in fact, that was my first choice, french CSS that I forgot to change shows it). Moreover, it seems this LaTeX feature is quite irrelevant among users of LaTeX-CSS (from we can see from history of issues and PR's).

One way to achieve this could be to create a class similar to the latex-dark class, which users can add to the <body> (or <article>?) tag to enable line indentation.

It's probably more convenient to restrict the use of this class with <article> tag, because there is no need to indent the abstract or the TOC. Or is better take into account the possibility of using it also with <body> tag (and avoid indentation of the abstract)? What do you think?

vihuna commented 1 year ago

I have pushed the remarked changes; I have supposed that indent-pars class must be used only with <article> tag, for the moment.

vihuna commented 1 year ago

About the indentation size:

By default I had set the size of the indentation to 1.5rem for the first line in a paragraph.

Considering the default 12pt-1rem font size in LaTeX.css (in Firefox and Chrome with 16px-default font), and 17.62482pt for the size of \parindent in LaTeX [12pt]-default-articles (TeX version: TeX 3.14159265 (TeX Live 2020/Debian); the same for previous version TeX 3.14159265 (TeX Live 2019/dev/Debian)), the exact value for indentation must be 1.4687rem in LaTeX.css.

Setting this value (1.4687rem) results in the following indent sizes (depending on the browser font-size):

So, do you prefer the exact value 1.4687rem instead of the rounded one that I have used? And, what do you think about the resulting ratio browser-font-size/indentation-size shown in the previous paragraph?.

vincentdoerig commented 1 year ago

Thank you for the changes! The values you calculated are quite good. IMO we can use the exact value of 1.4687rem, but maybe add a comment in the source file indicating where it came from.

The ratio between the browser font size and indentation size will of course not be perfect, but I think this is a tradeoff we can live with.

vihuna commented 1 year ago

I can add something like the following comment, if you approve it:

/* In a 12pt LaTeX article (Latin Modern font), \pairdent = 17.62482pt;
with default 12pt~1rem LaTeX.css, that size becomes 17.62482 / 12 = 1.468735rem. */

But I'm still not completely sure which one is the best option.

The precise definition in LaTeX source files is parindent = 1.5em (you can see it here).

But while in HTML+CSS with 12pt~1em font, you get the same effect with width: 1em and width: 12pt (width: 2em ~ width: 24pt ...), in LaTeX with 12pt-lmodern font, we have the ratio 1em ~ 11.74988pt (1em = "width of M letter").

Because LaTeX.css also uses lmodern font by default, I thought make the calculations based on point units will be more precise (and the displayed documents seems to confirm it).

I have been taking a look into other projects involved in LaTeX + HTML for inspiration, tex4ht and latexml:

But there is still more to say: LaTeX points and CSS points have not the same size:

(Some references about LaTeX units here, here and also here)

So, 1pt[LaTeX] = (72 / 72.27) * 1pt[HTML]. And taking this into account, the comment in CSS file should be:

/* In a 12pt LaTeX article (Latin Modern font), \pairdent = 17.62482pt; taking into account
the ratio 1pt[LaTeX] = (72 / 72.27) * 1pt[HTML], with default 12pt~1rem LaTeX.css
the ident size becomes 17.62482 * (72 / 72.27) / 12 = 1.4632478206724784rem. */

Finally, with all this in mind, how should I proceed (and how many decimal places will be appropriate?)

vincentdoerig commented 1 year ago

Thanks again for the insightful comment. W3 says "CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions" [1]. And therefore I think it is reasonable if we stick to three decimal places, so I'd set the --text-indent-size to 1.463rem. If you agree, I'll gladly merge the PR!

[1] https://www.w3.org/TR/css3-values/#numeric-ranges

vihuna commented 1 year ago

Sorry, I mistook blockquotes for lists at some point: paragraphs in quotation environment are also indented (first line) in LaTeX, with the same indentation size. This indentation should have been avoided for paragraphs inside HTML lists instead (#97fe952, #5ef900c).

Also, because it is "indent paragraphs", only text inside p tags will be indented. I.e., I have ruled out using some CSS code like

.indent-pars blockquote {
  text-indent: var(--text-indent-size);
}

to indent blockqoutes (or any other environment) without p tag. Tell me if you think the opposite is better.

vihuna commented 1 year ago

And therefore I think it is reasonable if we stick to three decimal places, so I'd set the --text-indent-size to 1.463rem

OK. I have added a comment about the W3C followed recommendation, in the commit message.

vihuna commented 1 year ago

Only one more comment.

I have previously commented (and that's how I use it in index.html example):

It's probably more convenient to restrict the use of this class with <article> tag.

But this is not absolutely true: in LaTeX.css the abstract is centered unlike default LaTeX articles (without titlepage option, it's like a quotation environment). So paragraphs from the abstract are actually indented in default LaTeX articles.

If at some point the abstract style is changed to look like LaTeX default, it would be more convenient to use it with body tag, (and avoid the indentation of TOC, that has already been taken into account because TOC is an ordered list). Also, font size in LaTeX abstract is smaller, making smaller the indentation size too.

vincentdoerig commented 1 year ago

Cheers! I removed the !important override in the Spanish file to stay consistent with the French one. Since indent-pars can now be used regardless of the tag, I think this is an acceptable solution for the moment.

Thanks again for your contribution!!