Wie kann ich mithilfe von CSS Text in der zweiten Spalte um ein übergroßes Element in der ersten Spalte fließen lassen? ⇐ CSS

[Guest]

Ich versuche, ein Kreuzworträtsel so zu gestalten, dass eine Vorschau im Internet und ein Ausdruck möglich sind, um das Rätsel tatsächlich zu lösen. Das Ergebnis muss auf einem A4-Blatt oder ähnlichem gut aussehen und Platz zum Schreiben der Antworten in das Raster bieten.

Code: Select all

.block {
width: 300px;
height: 400px;
-webkit-columns: 0 0;
-webkit-column-gap: 10px;
column-width: 140px;
}
table.xw {
table-layout: fixed;
background-color: lightblue;
width: 200px;
height: 200px;
margin: 0 0 0 10px;
}
.clue {
margin: 0 0 3px 10px;
page-break-inside: avoid !important;
}





 Crossword grid here

ACROSS
1. First across clue
2. Second across clue
3. Third across clue
DOWN
1. First down clue
2. Second down clue
3. Third down clue

Die Idee ist, das Raster in der oberen linken Ecke zu haben, und Die Hinweise beginnen darunter. Hinweise fließen in einer zweispaltigen Anordnung nach unten, zur rechten Seite des Rasters und dann nach unten unter das Raster.
Ein Beispiel finden Sie unter https://wombat.cf/crosswords /special-2024.html, wo ich das Raster verkleinert habe, damit es in die Spalte passt. Wenn ich das ausdrucke, sind die Quadrate zum Schreiben etwas klein.
Ich würde mir also wünschen, dass das Raster größer wäre und die Hinweise rechts davon gerendert würden in eine schmalere Spalte und nutzen Sie dann die volle Breite der Spalte unterhalb des Rasters.
Einfaches Erhöhen der Rastergröße ergibt https://wombat.cf/crosswords/broken-2024.html< /p>
Ich habe herumgespielt mit anderen Optionen, mit Flex und Ähnlichem, aber ich kann nicht herausfinden, wie ich die Hinweise um das Raster herum und in die breitere Spalte darunter fließen lassen kann.
Das alles muss so sein Ich arbeite mit Webkit, da ich Python pdfkit.from_string() verwende, um druckbare PDFs zu generieren und HTML im Web zu veröffentlichen.
https://alistapart .com/article/crosscolumn/ hat eine Teillösung, aber ich war es Ich frage mich, ob es in den 20 Jahren seit der Veröffentlichung einen besseren Weg gibt.
Mit dieser Lösung komme ich zu https://wombat.cf/crosswords/desired-2024.html
, aber es muss manuell hinzugefügt werden den Ausschnitt an der richtigen Stelle wie folgt:

Code: Select all

.block {
width: 300px;
height: 400px;
-webkit-columns: 0 0;
-webkit-column-gap: 10px;
column-width: 140px;
}
table.xw {
table-layout: fixed;
background-color: lightblue;
width: 200px;
height: 200px;
margin: 0 0 0 10px;
}
.cutout {
width:200px;
height: 200px;
margin-left: -140px;
float: left;
}
.clue {
margin: 0 0 3px 10px;
page-break-inside: avoid !important;
}





 Crossword grid here

ACROSS
1. First across clue

2. Second across clue
3.  Third across clue
DOWN
1. First down clue
2. Second down clue
3. Third down clue