I want to generate a PDF from input that contains LaTeX math markup. So I am converting the math markup to png images (using jlatexmath) and inserting them as base64 encoded inline images in an HTML document, which is then converted to PDF using itext7/html2pdf.
The HTML version is aligned correctly:
However the PDF version is not:
The HTML looks like this:
<p>Here is an example using LaTeX math: <img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAdCAIAAADuPz9sAAAFqUlEQVR4Xu2ZXUiUWxSGu4huFb3ySooUrxQUbS4K80pBBX8QFS1BiMKEskBLUVFRkeOgUVqgRKBS9gtqRlNJYJTY0cZGzZ8KRXMMsTBTLB2+8zL7zJ496/uZ0dP5xgufi2F/7946r8u911p7Zp+0hy7so8KOMJvNVNo17BJvWoGem5uLiIj4/v07nXDFaDR+/vyZqrsGeINDquqOVqBBRkYGlVx5/PhxW1sbVR2cOHEiKytLsv+1JpOptbX1zp07dNH/Dxw+efKEqvqiFej19fXc3FyqCmxsbCQlJVHVgcViQaDDw8Mxttls+Je8f/8eA7pOF5KTk+GWqjqiHOgHDx48evSopqamqamJzglcvXq1vb2dqg7KysrwS6xWK8bYyA0NDW/fvp2dnaXrdAE+4ZaqOqIQaBzz/Px8DOrq6oaGhui0QFRU1NraGlUdHD9+fGlpiapeAj4jIyOpqiMKgcZG7urqwiA7O3tzc5NOOxgfH4+Li6OqA/xgSEgIVb1KbGzs6OgoVfVCIdCXL1+enp5GpFJSUkZGRui0gytXrhQXF1PVwfDwcHx8PFW9yqVLlxobG6mqFwqBfvfuHdqD7u7uCxcu4JVOOzh58uS9e/eo6uD69euFhYVU1WRgYOD06dMdHR3s8ePHj8+ePXNdIvX393/58oWIDLfNaGdnJzxT1WNEe4reJE17CoH2kCNHjoyNjVHVAdqVmzdvUlUTRIFnqq2trfPnz7vO/4tGTdNuRnE6DQYDVT2G29PwJqnb23mgDx8+PD8/T1UHYWFh2AJU1SQ1NZWP0fbcvn1bmHSCKZw5qnrQjM7MzAQFBVHVY7g9DW+Sur2dB9rPz29lZYWqdn79+nXgwIEfP37QCXXQ/0VHR7948YI9ZmZmsjM4NTWFk/H06VOM8/Ly8Pr169dTp04JP+rSjMrXc5BV/P39RcVzRHvcG7Y2Ekh9ff39+/fRp01OTkpK9hjOQH/48OFvTRA+4Qel/fv3451EhWM2mwMDA6mqCX5/bW0tf+StGIpqS0sLAre6usozw7Fjx/hK0owqrmfALTyLCpiYmGhwBQVTvoFEe9wb7l9IJujQscEHBwdxpJgu2uPsPNA+Pj4/f/4UFQ6uvNttOW7dutXT08MfkXn4GJd4XOqwm3jPIM7Km1H5egZOmK+vr6h4jmhPfHeAfE1uYWQBQyF1uC3fjIMHDy4sLFDVDhopjc5PkYsXL4p2jx49ysc4qpI9oK9fv2btpnj1kDej8vUM/F2HDh3ijwzcBv5yxWg0yne0aI97w+bDSralXr16xRdze2J8FAItuSvfDPwzcO6oaicxMfHu3btU1SQnJ0d8PHPmDK+0VVVVJpOpvLz8xo0byIBwn56ezlfKm1Gynq9EjwTP/HFbiPa4t5KSEpxdvFFfXx9SFpvl9paXl8UNoRBot+WbkZaWJh52keDg4E+fPlFVBSRZJLuCggJRxE5Uq+xohzX6dw2QYeCZqu6Q29PwJqnbcwm0WL4VS6oIllVWVhIR/P79OyAggKrqPHz4sLS01GKxEB11iSiMc+fOqRVhbSoqKqqrq6nqDkV7at4kdXvOQJPyrVZSOWiTFT8jxQlF6qDq9llcXHz+/DkRkRPQwBHRQ5KTk9+8eUPVHaHoTdK05wy0vHxLSiWVY7PZUF7lnzrhBCBLSvbvBNDnKV5V9Qc+4VZxr+mDM9CkfKuVVJGysjL5NxcoDuy+wBoPxfSiP729vcgAVNURZ6BJ+VYsqQQUVnl/kpCQ8O3bNwzOnj2LV/w2ssAroAzCLVV1RKHr2BYomy9fvmRjq9WKVB4TE8Me2Y727j5i4PKi/VWRDvzXQEv2nMM+1ggNDb127VpzczPT0fwh/3g9RyMBFhUVUVV3/kCgcd9FepHsn28ZDAa1e7m3gDfvfi3L+AOB3sMT9gKtE3uB1ol/ADKVewttxwYlAAAAAElFTkSuQmCC"/>.
And here is another: <img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAPCAIAAADf8I4NAAAB6klEQVR4Xt2WTatBQRjHfQzfAR/AZ7CwUUpethYWslXeyurSRRZeUyiSnQVSslAKSRZessGCjY1IeYn7dM69g2fOPY6bW+79rWae/8zT/OeZmXNE53+BiLT0en0sFruSXpp4PK7T6Uj3YkMikZA2odFo2Gy2brebzWaxJphfSnK94Ds2JpNJMplstVrlchlrDIPBAIco7iYRAp3kARu5XG4+n8Nhq9VqWGOQSqU4RHE3iRDoJHw2jsdjpVLxeDz5fN5kMo1GIzKAE9r8cDgMh8PsnkEGpD4EbL9KpXI6nZyXls9Gr9c7HA7pdDqTyTSbze12SwZwQtvodDrRaBRsrNdrjUaDVAK4fb/F5/OtVis0DCqgVqv3+z2Kn/ltsJjN5ul0Sro0gUDgjUEsFrMNv99/Op1YVavV7na7arUKw27nPQa4UiqVi8UCCwx8NtrtNkxWKBTQrtfrRP0OuhoAWwS32w2VwdoX/X6f9U/wer3X1YBNgTzwhEBwPB5fTf2Ez4bVak2lUna7HfaSZxEEThsul6tUKsnlcrhpWBMMXE6Hw2EwGIxG4w8PlXBkMhmKJBKJQqGwXC4tFguSnsszbcxmMxSB71SxWAwGg5vNBknPhdsG/IyEQiHSfXEikQg8JKR7sfGn+Sc2PgBzdMQ49YHi+gAAAABJRU5ErkJggg=="/>.
</p>
and the CSS contains:
img {
vertical-align:middle;
}
Any idea how to make it align in the PDF version?