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.

Sign up for GitHub

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

Jump to bottom

margin-left issue in 63 release #2340

Open
victorhartman opened this issue Jan 2, 2025 · 1 comment
Open

margin-left issue in 63 release #2340

victorhartman opened this issue Jan 2, 2025 · 1 comment
Labels
bug Existing features not working as expected

Comments

@victorhartman
Copy link

Hi, I have noticed a regression in version 63.1. This issue did not exist in 62.3.

Using margin-left the text is not the same with every page. See the .titles class. Setting margin-left to 0 has no issue. I have tried my best to create a reproduction of the bug:

test.html

<!DOCTYPE html>
<header>
    <style>
        @page {
            size: A4 landscape;
            margin: 0;
        }

body {
    margin: 0;
    width: 100%;
    max-width: 1124px;
    font-family: 'Arial', sans-serif;
    color: darkblue;
    position: relative;
    height: 793px;
}

.header {
    padding: 0 75px 0 0;
    height: 86px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: darkblue;
    color: white;
    align-items: center;
    overflow: hidden;
}

.logo {
    margin-top: 4px;
    margin-left: -30px;
    position: relative;
}

.logo img {
    width: 100px;
}


.left {
    display: flex;
    align-items: center;
}

p {
    margin: 0;
}

.titles {
    margin-left: -10px; /* This is the issue */
    white-space: nowrap;
}

.title {
    font-size: 25px;
    font-weight: bold;
}

.subtitle {
    font-size: 16px;
    font-weight: 400;
}

.container {
    display: flex;
    margin: 50px 80px 0px 80px;
    min-height: 600px;
}

.container:not(.column) {
    justify-content: space-between;
}

.container:is(.column) {
    flex-direction: column;
}

.column {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    width: fit-content;
}


.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    font-size: 12px;
    position: absolute;
    width: 100%;
    bottom: 30px;
}



    </style>
</header>

<body>
    <!-- HEADER -->
    <div class="header">
        <div class="left">
            <div class="logo">
                <img src="logo.png" />
            </div>
            <div class="titles">
                <p class="title">title</p>
                <p class="subtitle">subtitle</p>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <div class="container">
        <div class="column" style="width: 45%;">

        </div>
        <div class="column" style="width: 25%;">
        </div>
    </div>
    <div class="footer" style="page-break-after: always;">
    </div>

    <!-- PAGE 2 -->
    <div class="header">
        <div class="left">
            <div class="logo">
                <img src="logo.png" />
            </div>
            <div class="titles">
                <p class="title">title</p>
                <p class="subtitle">subtitle</p>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <div class="container">

        <div class="column" style="width: 45%;">

        </div>
        <div class="column" style="width: 25%;">
        </div>
    </div>
    <div class="footer" style="page-break-after: always;">
    </div>
</body>

test.py

from weasyprint import HTML

HTML(filename='test.html').write_pdf('test.pdf')

logo.png
Image

pdf with version 62.3
test 62.pdf

pdf with version 63
test 63.pdf
@liZe
Copy link
Member

liZe commented Jan 5, 2025

Thanks for the report. Yes, there’s a regression. Just as for #2312, we’ll wait until we rewrite the flex layout.

@liZe liZe added the bug Existing features not working as expected label Jan 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @victorhartman