Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I prevent the set_caption text touch the top of the image? #120

Closed
fredericomattos opened this issue Oct 20, 2024 · 4 comments
Closed
Labels
bug Something isn't working

Comments

@fredericomattos
Copy link

The case that I will explain below only happens when generating the image, when I open the html generated by pandas, the space appears correctly, that's why I decided to ask here.

All the ways I've tried to prevent the text set in set_caption from touching the top of the image, including margin-top and the like, have not worked and the text continues to touch the top of the image as if I hadn't even added anything to prevent it.

Is there any way around this?

My base code is this:

    df = df[['country','competition','match','market','option','matched weight','above expectations','odds','result','back','cum_sum']]

    styles = {}
    for key in df.columns:
        styles[key] = [{"selector": "th",
                        "props": [("text-align", "center"),
                                ("background-color", "#40466e"),
                                ("color", "white")]}]

    df = df.style.set_properties(subset=df.columns, **{'text-align': 'center'}).hide(axis='index')
    df = df.set_table_styles(styles)
    df = df.applymap(map_colors, subset=["result"])
    df = df.set_caption(f"<h2 style='font-size: 16px'>Filial Weight of Flow - {ytd_telegram}</h2>")

    dfi.export(df, "weight_of_flow.png", table_conversion="selenium", max_rows=-1)

It generates this image:

weight_of_flow

But even adding margin-top to set_caption the result is still exactly the same with the text touching the top of the image.

I didn't even want to increase the size of the image, but since by default it is touching the top, I tried to put margin-top but it still didn't work, I just wanted the text to be centered in that white space.

You who have full knowledge regarding dataframe_image, could you help me solve this case, please?

@PaleNeutron
Copy link
Collaborator

I know the problem is, dataframe_image will guess dataframe edge by counting "non blank" pixels. That is designed for picture edge is table edge.

Consider table edge is caption, this method will slightly cut some pixels from the top. I'll try to fix that ASAP.

@PaleNeutron PaleNeutron added the bug Something isn't working label Oct 21, 2024
@fredericomattos
Copy link
Author

I know the problem is, dataframe_image will guess dataframe edge by counting "non blank" pixels. That is designed for picture edge is table edge.

Consider table edge is caption, this method will slightly cut some pixels from the top. I'll try to fix that ASAP.

Thank you very much!

@PaleNeutron
Copy link
Collaborator

PaleNeutron commented Oct 24, 2024

Fixed with https://github.com/dexplo/dataframe_image/releases/tag/v0.2.6

The out put now looks like:

caption_cut

@fredericomattos
Copy link
Author

Perfect @PaleNeutron !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants