latex_envs.css adding unnecessary padding to images

[halflings]

latex_envs.css contains a rule that I think was supposed to "center" images somehow, but ends up reducing their size by pushing them too far to the right:

div.output_subarea.output_png {
    margin-left: +10%;
}

Here's how the image looks with the latex_envs.css rule still active:

And here's how it looks if we disable this rule:

Would it be possible to remove this rule? If so I can submit a PR.

[jfbercher]

@halflings. Indeed, I originally introduced this rule to do some kind of centering of images. This is not perfect since as you point out, the quality of the result also depends on the size of the image you use and also, probably, of your screen resolution. Originally, the 10% was chosen to get a good result with standard matplotlib plots, but it seems that you use either pandas or seaborn or both (with a different size for images). You can of course modify, adapt the css to your taste, this is the goal of css. However I am not sure that it would be a good idea to change it for everyone: some other users may prefer the other (previous) situation.

A drawback of current nbextensions in this repo is that updates overwrite existing files. Thus modifications to css are not persistent. It would be a good idea to find a systematic way to allow users to make modifications to css and secure these modifications. I was thinking to allow to use several css -- kind of "themes", with latex_envs [namely because some choices of colours for rendering theorems/exercises/etc are questionable]. Perhaps that the "theme" could be selected from the nbextension page as a parameter (specified in the yaml file). This would allow users to tailor their own themes. I will have a look.

Also, concerning this I extension, I am planning a big rewrite of all the conversion machinery, but this will take some time.

[halflings]

Thanks for the feedback @jfbercher ! My plots are bigger because I modified the default size via rcParams (in matplotlib).

It would be great to have customizable CSS that wouldn't be overwritten, but in the meantime maybe we can find a better way to center images in a different way (that wouldn't reduce the size of larger images)?

[jcb91]

For persistent customizable css, you could perhaps use custom.css? Mine's at /Users/josh/.jupyter/custom/custom.css, but you should be able to find it from python with

from jupyter_core.paths import jupyter_config_path
for base in jupyter_config_path():
    cust_css_path = os.path.join(base, 'custom', 'custom.css')
    if os.path.exists(cust_css_path):
        print('{!r} exists!'.format(cust_css_path))

[juhasch]

@halflings : Did you try @jcb91 suggestion ?

[halflings]

Hey!

Yes, added some styling to my custom stylesheet, and that's working OK. I still think it would be nice to remove that padding from the default style, as it limits the maximum size of plots, and doesn't do what it's supposed to do (center images).

Since adding styling solved this for me, closing the issue!