Background

I would like to do a preview of a PDF from LaTeX like Overleaf, sort of like their LaTeX text on the left and PDF preview on the right:

enter image description here

However, I am just going to be making math equations currently, generating the PDF on the backend / server side using pdflatex, and sending the PDF as an ArrayBuffer to the frontend to render using react-pdf (which uses PDF.js under the hood I think). It can seemingly render a PDF from ArrayBuffer, but all this is not really relevant for the question at hand, just some background.

Goal

I would like to make the PDF text font size to roughly match the font size of the page (even though they use different fonts). That is, if my web browser HTML/CSS font size is 16px, I would like the PDF to look like it is 16px font size. The problem is, the PDF will be scaled to fit in the available window, so the "font size" of the PDF will be dependent on:

  1. The dimensions of the PDF file itself.
  2. The dimensions of the HTML div it is put inside.

So what I'm thinking is, setting the PDF to have 0 margin, and somehow specifying the PDF size so it basically acts as an image of a certain known size that is specific to the PDF dimensions and the browser HTML div dimensions of the current screen. That is, I would do something like this in generating the LaTeX document (you shouldn't need to know LaTeX to answer this question, but again, for reference):

\documentclass{article}
\begin{document}
\usepackage{geometry}
\geometry{a4paper,total={6in, 8in},margin=0pt}

User input goes here.

\end{document}

Where it says 6in, 8in, I would need to somehow provide it the pixel dimensions of the PDF I want, which will render as if it is 16px font in the div on the right.

Question

How should I specify / calculate the dimensions the PDF should be? Also, (and I would probably have to tinker with this manually to really nail it correctly), how should I take into account various device screen pixel resolutions when calculating the size of the PDF?

For example, on Mac laptops at least, I think they use 2x pixel density/resolution (so what is 1000px shows properly up as 500px, so it doesn't look pixelated, if I understand correctly).

What I'm imagining is, say the PDF preview box is 800px wide (we don't care about height). And if it's possible to get the device pixel density calculations, we know on Mac (can you tell this in the browser? I will have to check) that it is 2x density. So 1600px is necessary to make the PDF. How do you convert this to PDF-specific dimensions (is it possible to specify pdflatex PDFs using pixels)? Can you somehow translate the screen pixel requirements of 1600px width, to inches, in a cross-device way? Then I could just send this to the pdflatex command:

\documentclass{article}
\begin{document}
\usepackage{geometry}
\geometry{
  a4paper,
  total={
    ${screenPixelWidthInInches},
    ${screenPixelHeightInInches}
  },
  margin=0pt
}

User input goes here.

\end{document}

Or else, how would you do it?

0

There are 0 best solutions below