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

Allow fragmentation in grid rows #2397

Open
stefocean opened this issue Mar 4, 2025 · 1 comment
Open

Allow fragmentation in grid rows #2397

stefocean opened this issue Mar 4, 2025 · 1 comment
Labels
bug Existing features not working as expected

Comments

@stefocean
Copy link

When using display: grid, there are situations where the content of a single grid column should be displayed on more than one page. Currently, Weasyprint does not have support for this, and rendered grid columns in PDFs can only exist on one page of output at a time and does not overflow to the next page.

What we would like to see from the PDF output is for the content in a column to overflow to subsequent pages, including decorations such as borders. Furthermore, columns currently try to place themselves on their own page in some situations (see below).

Bug is reproducible through the following text and styling content:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
<body>
    <div class="grid-container">
        <div>
            THIS SHOULD BE DISPLAYED IN ROW 1<br>
            THIS SHOULD BE DISPLAYED IN ROW 1<br>
            THIS SHOULD BE DISPLAYED IN ROW 1
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus velit iaculis, tincidunt purus ut, ornare nisi. Cras vestibulum ornare fringilla. Nam sagittis congue leo in facilisis. Fusce eget diam a orci laoreet ultrices. Curabitur tincidunt tortor malesuada, sagittis eros eu, fringilla felis. Aliquam vel laoreet mauris, id hendrerit risus. Donec eu accumsan mi. Mauris luctus laoreet sem, vitae semper nisl varius vel. Fusce egestas sapien et libero ornare, eu elementum odio efficitur. Nunc aliquet et orci vel rhoncus. Vivamus libero nisl, elementum mollis augue sed, porta porta mauris. In ac sollicitudin magna. Suspendisse vulputate, diam vel mattis molestie, urna magna rhoncus justo, ac imperdiet dui mauris feugiat sem. Maecenas et odio eu neque eleifend varius a in quam. Suspendisse sagittis elit id vehicula lacinia. Duis blandit est a dapibus gravida. Praesent posuere suscipit pretium. Nullam posuere lectus nec tortor ornare aliquam. Proin maximus viverra metus nec dignissim. Aliquam fringilla nec ante ac vehicula. Morbi blandit massa fringilla sem volutpat, quis lobortis nisi finibus. Quisque sed ultricies justo, quis dictum orci. Morbi rhoncus ante in congue imperdiet. Etiam at sem sit amet tellus vestibulum posuere. Vivamus finibus porta porta. Nullam pellentesque vitae ligula vitae consequat. Vestibulum bibendum, tortor eget fermentum lacinia, metus magna volutpat neque, ac bibendum ipsum nisi at ipsum. Fusce placerat ipsum in justo tincidunt, non varius ligula interdum. Nullam dolor est, ultricies non rhoncus ut, ultricies varius diam. Quisque facilisis mauris dui, ut ultricies elit ultricies ac. Quisque vitae massa quis eros suscipit porttitor et eget eros. Donec blandit bibendum felis a suscipit. Donec aliquet vehicula fermentum. Vestibulum ut quam libero. Nam euismod scelerisque lectus, non aliquam tortor semper eu. Duis hendrerit laoreet augue eu vestibulum. Aliquam eros elit, ultricies nec egestas a, faucibus eget lacus. Proin gravida dolor sit amet nunc aliquet pretium. Donec posuere faucibus nisl ac posuere. Etiam convallis ligula eget pharetra dapibus. Fusce eros mi, tempor in eros a, mattis placerat diam. Vivamus pulvinar vel quam in placerat. Ut odio nibh, accumsan sit amet posuere sed, iaculis sit amet tortor. Donec id varius quam, nec lacinia purus. Nulla vestibulum sollicitudin lacinia. Aliquam efficitur elit id eros congue, non elementum lacus varius. Suspendisse eu lobortis arcu, nec tincidunt sem. Donec mattis vitae erat ac elementum. Donec feugiat vitae risus id volutpat. Cras bibendum erat tellus, lobortis gravida libero dignissim id. Aenean aliquet sollicitudin ex, et venenatis metus. Donec vitae tortor ac eros maximus aliquet. Mauris posuere ut lectus posuere ullamcorper. Nullam sed elit urna. Ut tincidunt sit amet tellus eget hendrerit. Nam tristique urna id tortor laoreet, nec pretium ipsum ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras posuere suscipit diam, ac tempus metus pulvinar sit amet. Maecenas in faucibus ipsum, nec condimentum magna. Fusce non sagittis erat, ac egestas nisl. Sed vitae ultricies turpis, nec convallis felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec blandit risus non enim feugiat vulputate. Nunc elit odio, ullamcorper in risus id, gravida porta ex. Donec nisl metus, lacinia et viverra ut, dictum non tellus. Sed vestibulum tellus sit amet posuere maximus. Sed rutrum purus sit amet ipsum interdum posuere. Aliquam in dolor elit. Nam aliquet tincidunt elit. Vestibulum maximus magna odio, sed commodo neque rutrum nec. Sed elit libero, vehicula vitae tincidunt eget, iaculis quis eros. Proin commodo, purus sed ornare varius, mi erat dapibus sapien, sed sagittis erat felis aliquet metus. Maecenas facilisis a lectus sed cursus. Sed ipsum leo, tristique semper metus at, auctor posuere eros. Praesent nec posuere sapien, id laoreet magna. Nulla porttitor neque purus, sit amet efficitur risus imperdiet non. Morbi vel leo sollicitudin, efficitur ex at, facilisis est. Suspendisse potenti. Pellentesque eget lorem vel ante sollicitudin pharetra. Pellentesque nec blandit ligula, id iaculis arcu. Proin at elit placerat, aliquet justo non, dapibus sem. Aenean ultricies, tellus sit amet tincidunt pellentesque, lorem orci finibus lectus, nec rhoncus neque ligula nec lacus. Cras malesuada feugiat dui et porttitor. Nullam consectetur lectus nec finibus tempor. Mauris hendrerit tempor tempus. Nunc augue orci, luctus sed nisl at, malesuada iaculis turpis. Vestibulum risus mi, tristique vitae convallis in, imperdiet eu dui. Integer porta risus vel dolor ornare luctus. Proin imperdiet luctus nunc in tincidunt. Donec quis justo nibh. Integer tincidunt hendrerit tellus in rutrum. Donec dapibus dolor libero, eu sodales dolor pretium ac. Fusce elit sapien, rhoncus a arcu nec, fringilla sodales dui. Maecenas interdum lacinia sollicitudin. Maecenas consequat nulla vitae nulla aliquam dignissim. Integer vehicula justo orci, sed ultricies eros luctus aliquet. Quisque a rutrum nulla. Maecenas at tellus urna. Suspendisse ac varius est, sit amet bibendum nibh. Maecenas quis felis efficitur massa aliquam commodo ac ac erat. Etiam eget feugiat ligula. Etiam euismod massa fringilla laoreet ornare. Donec tristique nibh quis porta consequat. In facilisis tincidunt erat et pellentesque. Vivamus quis sem eget metus sollicitudin facilisis vel sit amet libero. Morbi quis sem mollis, lobortis nunc a, blandit tortor. Mauris eu tempus nibh. Vivamus tristique non elit in dignissim. In pretium orci purus, ac eleifend diam aliquet vitae. Mauris convallis blandit sem, vel scelerisque velit iaculis non. Aenean vitae est tellus. Suspendisse sit amet ultrices libero. Integer purus risus, sagittis ac lectus quis, condimentum malesuada libero. Duis ultrices faucibus turpis, quis condimentum leo hendrerit id. Aenean sit amet egestas ipsum, sit amet iaculis nulla. Pellentesque pretium metus neque, nec gravida nibh porta et. Aliquam eu condimentum elit, et consequat nisi. Nunc tempor nec dui vehicula dictum. Suspendisse rhoncus nec dolor sed dapibus. In hac habitasse platea dictumst. Sed cursus est felis, ut ullamcorper elit pulvinar condimentum. Nunc in purus velit. Vestibulum eu lacus at augue maximus cursus. Pellentesque elementum sed nunc at vulputate. Sed eget ultrices orci, quis efficitur velit. Etiam molestie turpis ac laoreet ultrices. Praesent imperdiet ligula in est luctus vestibulum. In hac habitasse platea dictumst. Maecenas nibh est, rhoncus pretium augue eu, faucibus commodo nibh. Vivamus a arcu at nisl laoreet aliquam ac suscipit mauris. Mauris eros turpis, commodo quis tincidunt ut, rutrum eu tellus. Proin molestie eget purus sit amet aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut at sollicitudin lorem, et hendrerit odio. Quisque malesuada fermentum iaculis. Curabitur dapibus aliquet dapibus. Nunc scelerisque porta enim, at volutpat dui viverra sed. Aliquam vulputate lacus id ullamcorper dignissim. Proin imperdiet urna quis nibh fringilla fringilla. Nullam sit amet iaculis erat, nec luctus nisi. Vestibulum scelerisque tempor pharetra. In hendrerit magna neque, id vestibulum justo vehicula non. Etiam quis suscipit felis. Curabitur lobortis tellus at imperdiet facilisis. Sed congue diam eu aliquam consequat. Duis egestas imperdiet magna, ac iaculis massa dignissim non. Morbi feugiat lorem eget purus eleifend mollis. Aliquam interdum feugiat metus sit amet ultrices. In cursus sit amet enim at egestas. Morbi eget risus eget elit sagittis congue. Curabitur lobortis luctus neque id tincidunt. Donec euismod risus nunc, ac varius mauris luctus a. Aliquam erat volutpat. Proin congue est nec felis tempor, ac laoreet risus lobortis. Nullam a tempor leo. Ut tincidunt auctor pulvinar. Maecenas vestibulum euismod lectus, id imperdiet arcu faucibus vitae. Etiam sit amet auctor tortor. Phasellus tristique volutpat urna ut dapibus. Donec vehicula turpis quis enim auctor sagittis. Morbi blandit erat ut sagittis suscipit. Ut ut nisl id ante venenatis egestas vel eget turpis. Nunc non orci non elit fringilla facilisis in vitae tortor. Curabitur convallis aliquam odio, sed ultricies nisi aliquet sit amet. Fusce suscipit risus nisl, sit amet consectetur tortor hendrerit at. Suspendisse et nunc at dolor luctus hendrerit et vel urna. Duis ultricies lorem a consectetur eleifend. Suspendisse vestibulum auctor facilisis. Duis mauris sem, interdum pellentesque lorem ac, tristique semper justo. Vestibulum sit amet consequat lorem. Vestibulum venenatis, diam quis pellentesque lobortis, neque tellus auctor urna, ut pellentesque nunc tellus ac nisi. Praesent auctor convallis arcu, quis malesuada odio pharetra nec. Curabitur sed accumsan massa. Vivamus bibendum purus eget velit blandit sagittis. Praesent pellentesque vitae sapien quis placerat. Donec consectetur ligula vel orci eleifend, a elementum nulla facilisis. Fusce eleifend ante risus, eget pulvinar libero pretium a. In interdum faucibus turpis, eget gravida magna pretium eget. Nullam euismod urna massa, id efficitur urna finibus et. In sagittis consequat orci non aliquam. Sed vel sapien in neque vehicula bibendum. Duis tristique, lectus at iaculis pretium, sapien ligula fermentum felis, sit amet suscipit urna enim nec sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia auctor ante sed feugiat. Duis dapibus, velit sit amet egestas tempor, ligula justo fringilla lacus, vel sodales sapien nunc in mi. Etiam ut ante accumsan, semper ligula ac, rutrum dui. Phasellus volutpat venenatis velit, vel gravida velit auctor in. Quisque volutpat faucibus magna, in facilisis nunc consectetur vitae. Duis ultricies pharetra maximus. Pellentesque quis neque efficitur, suscipit felis at, dictum lacus. Fusce quis lorem pretium, laoreet tortor at, condimentum urna. Curabitur est leo, gravida at risus ut, porttitor lacinia nunc. In blandit rhoncus ultrices. Praesent commodo vulputate bibendum. Suspendisse placerat metus eget quam rhoncus iaculis. Aenean rutrum vestibulum arcu. Vivamus pretium nisl vitae quam finibus, sollicitudin sollicitudin lorem fermentum. Nulla facilisi. Duis sed nulla lacinia, tincidunt lectus sit amet, pretium tortor. Morbi eu mollis felis. Aliquam et scelerisque magna. Proin in convallis erat. Nunc sed neque at nibh maximus vehicula id nec nunc. Duis at tortor vitae metus tincidunt pharetra. In viverra consectetur vulputate. Vestibulum auctor lacus a nibh commodo, et tristique ante egestas. Phasellus vel finibus lectus. Ut sit amet accumsan leo, id lacinia mi. Vivamus laoreet eros in elit dignissim, sit amet egestas turpis placerat. Vestibulum et porttitor dui. Vivamus congue a lectus quis rhoncus. Duis sodales, purus in aliquam scelerisque, neque sapien gravida enim, eu mollis justo ipsum in ligula. Nam vel nisi non magna facilisis convallis vel eu felis. Donec lectus nibh, malesuada facilisis tincidunt ac, ultrices eu ante. Maecenas ullamcorper a felis nec semper. Fusce elementum tortor leo, in ornare eros bibendum sit amet. Phasellus fermentum, velit sed luctus tristique, mi nisi commodo elit, eleifend volutpat velit urna at eros. Pellentesque tortor tellus, blandit vel semper ac, sollicitudin vel risus. Nam faucibus quis arcu non mattis. Phasellus varius varius leo, ac pretium arcu sagittis vehicula. Vestibulum sodales tincidunt eros, ac rutrum turpis dapibus quis. Sed aliquet sed libero id egestas. Vivamus hendrerit eu sem at dapibus. Sed erat quam, tempus nec nisl et, auctor sagittis turpis. Integer ut ex magna. Nulla facilisi. Cras eu arcu sit amet leo interdum pellentesque. Nunc sodales efficitur urna, ut faucibus metus venenatis non. Phasellus faucibus bibendum tortor sed suscipit. Praesent eget elit enim. Nunc malesuada enim nulla, semper rutrum metus gravida vitae. Duis volutpat, neque ut vehicula maximus, risus eros cursus arcu, non commodo orci mi in arcu. Curabitur ac quam et mauris consequat dapibus. Ut congue dolor et blandit imperdiet. Vestibulum auctor iaculis metus et ullamcorper. Fusce aliquam sapien vel sem elementum fermentum. Donec ut pretium ipsum, non porta lorem. Cras condimentum commodo turpis sed lacinia. Donec ut tortor congue, placerat massa et, ultricies dui. Duis tempus, felis eu bibendum eleifend, nisl odio auctor felis, vitae porttitor ex enim eget ipsum. Aenean id quam aliquam, gravida diam ut, consequat magna. Nunc convallis ante vitae neque hendrerit luctus ut a neque. Donec placerat sit amet nisl ut commodo. In vel erat id ante varius semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque blandit faucibus ultricies. Nullam maximus sollicitudin dui, id consectetur quam euismod maximus. Donec tempor tincidunt dui sed venenatis. Pellentesque mattis congue sapien. In tincidunt libero non volutpat egestas. Ut vel lacus nulla. Aliquam sollicitudin lorem consequat justo lobortis, non commodo diam auctor. Curabitur at nulla id turpis vestibulum sodales. Nam vitae lectus elit. Proin nec placerat magna. Curabitur sodales dignissim nunc, et aliquet diam pulvinar eu. Mauris vel lacinia elit. Praesent aliquet a nisl nec elementum. Vivamus non est non arcu dignissim maximus. Praesent bibendum purus lobortis augue cursus condimentum.<br>
            THIS SHOULD BE DISPLAYED IN ROW 2<br>
            THIS SHOULD BE DISPLAYED IN ROW 2<br>
            THIS SHOULD BE DISPLAYED IN ROW 2
        </div>
        <div>
            THIS SHOULD BE DISPLAYED IN ROW 3<br>
            THIS SHOULD BE DISPLAYED IN ROW 3<br>
            THIS SHOULD BE DISPLAYED IN ROW 3
        </div>
    <div>
</body>
</html>

CSS

@page {
    size: A4;
    margin: 4rem;
    font-size: 12pt;
    line-height: 1.8;
    text-align: justify;
}

.grid-container {
    display: grid;
    grid-template-rows: auto auto auto;
    border-top: 1px solid black;
    border-left: 1px solid black;
    width: 100%;
}

.grid-container > div {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

PDF Output

Image
@liZe
Copy link
Member

liZe commented Mar 4, 2025

Thanks for the report! It’s a known limitation, listed in #2145.

@liZe liZe mentioned this issue Mar 4, 2025
Open
20 tasks
@liZe liZe added the bug Existing features not working as expected label Mar 4, 2025
@liZe liZe changed the title Elements in Grids Overflow Incorrectly Allow fragmentation in grid rows Mar 4, 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 @stefocean