plotly / Kaleido

Fast static image export for web-based visualization libraries with zero dependencies
MIT License
378 stars 38 forks source link

My LaTeX strings look bold when exporting in .pdf and .eps #196

Open Ipuch opened 2 years ago

Ipuch commented 2 years ago

I'm using plotly to generate my figures for a research article, in pycharm. I need to export my figure in .eps or .pdf and I have an issue that doesn't appear if I export in png.

LaTeX strings got bold when exporting the figure. I don't know how to resolve the problem. Do you know any command to remove this bold effect?

image q_integrated.pdf

Here is the python code to write the labels for example:


for i in range(2, rows + 1):
    fig.update_yaxes(row=i, col=1, title=r"$\text{q (degree)}$")
for i in range(1, cols + 1):
    fig.update_xaxes(row=rows, col=i, title=r"$\text{Time (s)}$")

#This is how I export the figure:

python fig.write_image(out_path_file + "/q_integrated.png")
fig.write_image(out_path_file + "/q_integrated.pdf")
fig.write_image(out_path_file + "/q_integrated.eps")
dajerlont commented 1 year ago

I am having the same issue. Here's another person on Stack Overflow who had the same issue and got a few upvotes. There was no solution found by anyone.

Fixing this issue will accomplish at least two important things for Plotly:

  1. It will enable for Plotly to be used in professional journals. Some journals in engineering require the figures to be in vector form for publication. Given that formulas and Greek characters are important in scientific writing and figures, the implementation of LaTeX inside figures is also important. However, bold symbols are often used to denote vectors. This issue with bold fonts can not only cause confusion, but also makes the LaTeX characters inconsistent with the rest of the text and formulas in the paper.
  2. Given that Plotly is a powerful library, the successful implementation of LaTeX characters in its plots would allow for Plotly to be more widely used in academia and scientific communities for professional writing. The popularization of Plotly would not only benefit the science and engineering communities because of the many capabilities Plotly offers, but would also benefit the people developing Plotly due to the increased demand.

I'm suspecting the problem is somewhere with MathJax.

Here's a quick code to reproduce the error. Note that it will only happen in the PDF plot.

import plotly.graph_objects as go

# Create data
x = [1, 2, 3, 4, 5]
y = [2, 4, 1, 5, 3]

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=y))

# Configure MathJax options
fig.update_layout(
    meta={
        "mathjax": "svg", # this did not seem to fix the problem
    },
    font_family='Times New Roman', # this is important for journal publications
    title=r'$\text{Render Bug Only Happens in the PDF!}$',
    xaxis_title=r'$\Omega=v+\boldsymbol{w} \text{ this all looks bold}$',
    yaxis_title='This is not bold as it\'s a regular string.',
    showlegend=False,
)

fig.show()
fig.write_image('plot.pdf')

image

I'm also having problems showing LaTeX characters in 3-D plots, but perhaps that'll be a separate request. Thank you for helping solve this issue!

Coding-with-Adam commented 1 year ago

@dajerlont can you please attach the PDF.

alexcjohnson commented 1 year ago

FWIW if I run @dajerlont's code on my mac, I get this PDF:

plot.pdf

Which also shows the annoying "loading mathjax" message - that's a different issue

I see varying degrees of bolding when I open this PDF, depending on which program I use to open it (Acrobat Reader bolds more than Preview) and which monitor I display it on (my high-res laptop screen bolds it less than my lower-res secondary monitor)

It looks like what's happening is the extra border MathJax adds to these shapes (because it's drawing them as SVG paths, not regular font characters) has come back, maybe as a result of the switch to MathJax v3? I recall us fixing this same issue for v2 a long time ago...

dajerlont commented 1 year ago

I'm attaching my PDF here per @Coding-with-Adam's request. PDF_with_LaTeX.pdf It looks like @alexcjohnson has been able to reproduce this PDF. My conclusion is also that MathJax adds a border or stroke as it's called in Inkscape, which does not scale with plot size. This means that the LaTeX characters look very bold when zoomed out, but if you make the plot really large (such as in full screen or a larger monitor) the characters will look less bold because the width of the stroke is constant. (Again, only in the PDF version.)

How can we fix this? I'm very interested in using Plotly for my next conference paper, and I'm sure many folks will benefit from the ability of adding LaTeX to their plots without the confusion of the bold notation. Thank you all for your help.

alexcjohnson commented 1 year ago

I think we just need to remove the stroke. I’ll note that this is essentially a bug in Acrobat Reader, that subpixel lines are rendered as a full pixel regardless of scaling… but it’s such a longstanding bug that we have to treat it as a feature. If we think this is sufficiently detrimental to the look in-browser or in PNG and other output we could scope the change just to PDF output, but previously I think we removed it in all cases.

dajerlont commented 1 year ago

Actually, @alexcjohnson, this is not a problem unique to Acrobat Reader. I have the same problem in Linux (and Windows), too. The LaTeX text in the PDF version will look bold on iPad OS as well. Therefore, I'm not sure if this is a problem specific to the PDF interpreter. Please let me know what the status of this bug is. I'm eager to use Plotly for my papers if this can be fixed. Thank you all!

theo-brown commented 1 year ago

I also have this issue, Linux Mint + VSCode

konmenel commented 1 year ago

I have created a fork that essentially removes the stroke when Mathjax is loaded as @alexcjohnson suggested. I build kaleido locally and tested it using the snipped that @dajerlont provided and this is the outcome. plot.pdf

In total the changes are about 10 lines and an extra file that is used to create the configuration of Mathjax as mentioned in the MathJax Docs.

I also need that for papers so if anyone wants to test or use that as well all you need to do is:

  1. Clone the fork
  2. Build it with docker as mentioned in the README.md of kaleido. (Disclaimer: It takes a long time)
  3. Copy the newly compiled binary repos/build/bin/kaleido to where kaleido is on your system. For me it was in $HOME/anaconda3/bin/KaleidoApp/bin/ but location might differ if you are not using conda or if you are not in the base env of conda.
  4. Copy the file repo/build/mathjax_config.cfg to the root directory of kaleido. Again for me $HOME/anaconda3/bin/KaleidoApp/

I will probably also create a pull request soon however I just posted it here first so that anyone can test it if they want.

My setup

Coding-with-Adam commented 1 year ago

Thank you for this solution, @konmenel . You attached PDF looks clean. If you could create a PR, we would appreciate it.

konmenel commented 1 year ago

Just created to PR.

Ipuch commented 5 months ago

@Coding-with-Adam can we update on it ? Are you able to push the review on the kaleido repo?

I still want to write academic papers with Plotly. This is very much needed to distribute graphs for the benefits of science.

gvwilson commented 4 months ago

Thanks for your interest in Kaleido. We are currently working on an overhaul that might address your issue - we hope to have news in a few weeks and will post an update then. Thanks - @gvwilson