Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page Break properties for multiple columns?

Status
Not open for further replies.
OsakaWebbie

OsakaWebbie

Programmer
Joined
Feb 11, 2003
Messages
628
Location
JP
After trying to get output that satisfied me by taking custom HTML/CSS code from the browser into Word for final processing, and being told by the Microsoft:Office forum that I was trying to make Word do the job of a browser (see thread68-1113848), now I'm probably going to be accused of trying to make CSS and HTML do the job of a word processor, but I'll have to take my chances.

Since the time of the above-cited thread, I have learned how to get better performance out of Word (save the generated web page, then in Word, insert it as a file - it gets much more of the CSS right than just pasting), but now I have added a feature to my content that I think is truly impossible for Word to handle: chords above lines of song lyrics (see thread215-1206604). So now I'm focusing on getting the layout in the browser good enough to print directly. I have even developed a way to "edit" the content as necessary to prepare it for printing (using Javascript, the DOM, and a big textbox in a popup window).

But in some cases I would want two-column output. The first thing I discovered is that although the CSS property column-count is mentioned as early as 2001 (in a document about a proposed CSS3 that apparently never materialized), only Firefox 1.5 seems to have implemented a version of it (well, I don't know about less common browsers, but IE definitely doesn't have a clue). Okay, so I force my users who want 2 columns to use Firefox - not perfect, but I can live with that. (If you know how to make multiple columns work in IE, I'm all ears, but otherwise, I guess I'll just look at it as an excuse to promote Firefox!) But then I discovered that my carefully planned page-break-before properties for my different elements don't work with columns, only with pages. Is there any way to control the breaks for flowing content in columns? The whole purpose of this particular piece of code (dynamically generated from database data) is for it to be printed, so I don't really care if it doesn't display correctly in the regular browser view, as long as the print preview window (and the printed page, of course) get it right. And although the column-count property is easy, if there is a more complex way to accomplish this that opens up the way for controlling the column breaks and/or be more cross-browser compatible, I don't mind working at it.
 
Sort by date Sort by votes
If you create your columns using floated elements, you should be able to use the standard page-break-before styling to control your page breaks.

Can you post your source code?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I had heard that floating elements were generally considered unpredictable when printing (several web pages about making pages printer-friendly discouraged using them), but I guess if you use them carefully and intentionally, maybe it works out.

Code? Okay, here goes. I started with a page generated using my real database of songs so that you can get a real taste of the multipage output, but then for the sake of brevity (and also because I hesitate to post copyrighted lyrics in their entirety) I chopped the last half off most of the lines. I also discovered that I misspoke when I said that the page-break-before combinations were working for the break between the pages - my first test content coincidentally lined up right, but now I see other content not breaking where it should. What I want is to avoid breaks in the middle of a "stanza" of lyrics but rather encourage them either between songs (before a "title") or between stanzas (before a "smallspace" is the way I have it now, but after is fine too, just not between lines of lyrics that don't have a "smallspace"). If you give me an example of what you are thinking regarding floating elements, I look forward to it.
Code: 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Formatted Songs</title>
<style>
div#output { -moz-column-count: 2;
  -moz-column-gap: 20px;
  column-count: 2;
  column-gap: 20px; }
.titlekey { font-style: italic; font-weight: bold; font-size: 12pt; margin-bottom: 3pt; margin-top: 12pt; font-family: Arial, Helvetica; text-decoration: underline; page-break-before:auto; }
.pattern { font-size: 8pt; margin-left: 10mm; margin-bottom: 0; margin-top: 0; font-family: Arial, Helvetica; page-break-before:avoid; }
.lyrics { font-size: 10pt; margin-bottom: 0; margin-top: 0; font-family: Arial, Helvetica; page-break-before:avoid; }
.smallspace { font-size: 6pt; margin-bottom: 0; margin-top: 0; font-family: Arial, Helvetica; page-break-before:auto; }
.chordlyrics { font-size: 10pt; margin-bottom: 0; margin-top: 0; font-family: Arial, Helvetica; position:relative; margin-top:12pt; page-break-before: avoid; }
.chord { font-size: 10pt; margin-bottom: 0; margin-top: 0; font-family: Arial, Helvetica; position:absolute; top: -10pt; font-weight:bold; }
@media print { .noprint { display: none; } }
</style>
</head><body><div class="noprint">
<button onclick="window.open('format_edit.php','edit','height=650,width=650,scrollbars=yes');">Edit This Output</button>
<hr></div><div id="output">
<p class=titlekey>039: I Could Sing of Your Love Forever&nbsp;&nbsp;(E)</p>
<p class=pattern>Guitar intro, (piano plays pad chords only), A-B-A-B-C-B</p>
<p class=chordlyrics><span class=chord>E</span>Over the</p>
<p class=chordlyrics><span class=chord>F#m</span>Your river</p>
<p class=chordlyrics><span class=chord>A</span>And I</p>
<p class=lyrics>And let the healer set me free</p>
<p class=chordlyrics><span class=chord>D</span>I'm happy</p>
<p class=chordlyrics><span class=chord>F#m</span>And I</p>
<p class=chordlyrics><span class=chord>A</span>For I</p>
<p class=chordlyrics>Of <span class=chord>B</span>when</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;<span class=chord>E</span>I could</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;<span class=chord>A</span>I could</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;<span class=chord>E</span>I could</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;<span class=chord>A</span>I could</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics><span class=chord>F#m</span>Oh, I feel</p>
<p class=chordlyrics><span class=chord>A</span>It's foolishness</p>
<p class=chordlyrics><span class=chord>F#m</span>But when</p>
<p class=chordlyrics>They will <span class=chord>A</span>dance</p>
<p class=titlekey>049: Love of My Life&nbsp;&nbsp;(E)</p>
<p class=pattern>(piano transpose -1) (Intro E A E A) V1, Br, Ch, V2, Br, Ch, "All...", Ch, Ch, "All...".</p>
<p class=chordlyrics><span class=chord>E</span>You know me</p>
<p class=chordlyrics><span class=chord>E</span>You know the frailness</p>
<p class=chordlyrics><span class=chord>E</span>And still You show Your love</p>
<p class=chordlyrics><span class=chord>E</span>The kindness of a King</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics>&nbsp;&nbsp; <span class=chord>A</span>Lead me <span class=chord>E/G#</span>on, Lord,</p>
<p class=chordlyrics>&nbsp;&nbsp; I <span class=chord>C#m</span>give my<span class=chord>B</span>self</p>
<p class=chordlyrics>&nbsp;&nbsp; That <span class=chord>A</span>I may <span class=chord>E/G#</span>know</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You're the love of my <span class=chord>E</span>life</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I know Your <span class=chord>A</span>presence</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lord, I sur<span class=chord>E</span>render</p>
<p class=chordlyrics>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To the love of my <span class=chord>A/B&nbsp;&nbsp; E</span>life</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics><span class=chord>E</span>Knowing my heart would fail</p>
<p class=chordlyrics><span class=chord>E</span>You died to set</p>
<p class=chordlyrics><span class=chord>E</span>In this You've shown Your love</p>
<p class=chordlyrics><span class=chord>E</span>That's why my prayer</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics><span class=chord>Emaj7</span>All that I am, Lord</p>
<p class=chordlyrics><span class=chord>Emaj7</span>All that I am, Lord</p>
<p class=titlekey>034: Great Is the Lord&nbsp;&nbsp;(C)</p>
<p class=pattern>(transpose piano -2) Piano intro, A-B-A-B-C, repeat "Great are You, Lord!"</p>
<p class=lyrics>Great is the Lordt</p>
<p class=lyrics>By His power we trust</p>
<p class=lyrics>Great is the Lord</p>
<p class=lyrics>By His mercy He proves</p>
<p class=smallspace>&nbsp;</p>
<p class=lyrics>Great is the Lord and worthy of glory</p>
<p class=lyrics>Great is the Lord and worthy of praise</p>
<p class=lyrics>Great is the Lord, now lift up your voice</p>
<p class=lyrics>Now lift up your voice</p>
<p class=lyrics>Great is the Lord! Great is the Lord!</p>
<p class=smallspace>&nbsp;</p>
<p class=lyrics>Great are You, Lord, and worthy of glory</p>
<p class=lyrics>Great are You, Lord, and worthy of praise</p>
<p class=lyrics>Great are You, Lord, I lift up my voice</p>
<p class=lyrics>I lift up my voice</p>
<p class=lyrics>Great are You, Lord! Great are You, Lord!</p>
<p class=lyrics></p>
<p class=titlekey>116: Open Our Eyes&nbsp;&nbsp;(D)</p>
<p class=lyrics>Open our eyes, Lord, we want to see Jesus</p>
<p class=lyrics>To reach out and touch Him</p>
<p class=lyrics>Open our ears, Lord</p>
<p class=lyrics>Open our eyes, Lord</p>
<p class=titlekey>069: As the Deer&nbsp;&nbsp;(D)</p>
<p class=pattern></p>
<p class=chordlyrics><span class=chord>D</span>As the <span class=chord>A/C#</span>deer</p>
<p class=chordlyrics>So my <span class=chord>G</span>soul</p>
<p class=chordlyrics><span class=chord>D</span>You al<span class=chord>A/C#</span>one</p>
<p class=chordlyrics>And I <span class=chord>G</span>long</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics><span class=chord>Bm</span>You alone</p>
<p class=chordlyrics>To <span class=chord>G</span>You alone</p>
<p class=chordlyrics><span class=chord>D</span>You al<span class=chord>A/C#</span>one</p>
<p class=chordlyrics>And I <span class=chord>G</span>long</p>
<p class=titlekey>141: When I Look Into Your Holiness&nbsp;&nbsp;(C)</p>
<p class=pattern>Short piano intro; 2X</p>
<p class=chordlyrics>When I <span class=chord>C</span>look</p>
<p class=chordlyrics>When I <span class=chord>C</span>gaze</p>
<p class=chordlyrics>When all <span class=chord>C</span>things</p>
<p class=chordlyrics>Become <span class=chord>F</span>shadows</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics>When I've <span class=chord>C</span>found</p>
<p class=chordlyrics>When my <span class=chord>C</span>will</p>
<p class=chordlyrics>When all <span class=chord>C</span>things</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics>I worship <span class=chord>F&nbsp;&nbsp;G</span>You</p>
<p class=chordlyrics>The <span class=chord>Dm7</span>reason I live</p>
<p class=chordlyrics>I worship <span class=chord>F&nbsp;&nbsp;G</span>You</p>
<p class=chordlyrics>The <span class=chord>Dm7</span>reason I live</p>
<p class=titlekey>097: I Give You My Heart&nbsp;&nbsp;(G)</p>
<p class=pattern>A-B-A-B-B (end with G for last "me")</p>
<p class=chordlyrics><span class=chord>G</span>This is my <span class=chord>Em</span>desire</p>
<p class=chordlyrics><span class=chord>Em</span>Lord, with all <span class=chord>D/F#&nbsp;&nbsp;G</span>my heart</p>
<p class=chordlyrics><span class=chord>G</span>All I have with<span class=chord>Em</span>in me</p>
<p class=chordlyrics><span class=chord>Em</span>All that I <span class=chord>D/F#&nbsp;&nbsp;G</span>adore</p>
<p class=chordlyrics><span class=chord>G</span>Lord, I give You my <span class=chord>D/F#</span>heart</p>
<p class=chordlyrics>I <span class=chord>C/D</span>live for You al<span class=chord>G</span>one</p>
<p class=chordlyrics>Every breath that I <span class=chord>D/F#</span>take</p>
<p class=chordlyrics>Lord, <span class=chord>C/D</span>have Your way</p>
<p class=titlekey>035: He Is Exalted&nbsp;&nbsp;(D)</p>
<p class=pattern>Intro: first part minus "name" (usually piano only), 2-3X, tag last line twice</p>
<p class=chordlyrics><span class=chord>D</span>He is exalted</p>
<p class=chordlyrics>I will <span class=chord>G/B&nbsp;&nbsp;A/C#</span>praise Him</p>
<p class=chordlyrics><span class=chord>D</span>He is exalted</p>
<p class=chordlyrics>And <span class=chord>G&nbsp;&nbsp;A&nbsp;&nbsp;G</span>I will praise</p>
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics><span class=chord>Em</span>He is the <span class=chord>A</span>Lord</p>
<p class=chordlyrics><span class=chord>Em</span>Heaven and <span class=chord>A</span>earth</p>
<p class=chordlyrics><span class=chord>Em</span>He is exalted</p>
</div>
</body></html>
 
Upvote 0 Downvote
Well - I've been playing around with this for the past hour or so, and can get no joy - even without columns.

Maybe the browser support isn't there for the page-break styles, or maybe I just don't understand the properties... but I just couldn't get it working, no matter what I did!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Aha! I think I just found the answer, on the w3schools site (
w3schools said:
CSS page-break-before Property...
Note: You can not use this property on absolutely positioned elements.
Click to expand...
I bet that when it looked like it was working for me before, it was working, because I have been rapidly adding chords to more and more songs - when there are no chords, my code uses the class that doesn't have the CSS positioning. Strictly speaking, I'm "using" it on the element that has relative positioning (chordlyrics) not absolute (chord), but since spans with the chord class are inline, I suspect that messes it up.

I'm going to bed now (my time zone is either way ahead or way behind most everyone else on this forum), but if Dan or someone else has another idea of how to do this, I'd love to read about it when I wake up. I need the absolute and relative positioning for placing the chords above the lyrics (unless, of course, there is another way to do that, but I doubt it).
 
Upvote 0 Downvote
Okay, I'm awake again, and testing more. No, it's not just the CSS positioning that is interfering. This morning I decided to try a different strategy - instead of page-break-before, I made a new class "stanza" that has "page-break-inside:avoid", and then put <div class=stanza> around each group of lyrics that I don't want separated. It didn't work. So then just as a test, I removed all the CSS positioning (letting the chords just fall within the lyrics) - it still didn't work!

This is frustrating. As the folks on the Office forum said, Word makes a lousy browser, but now I'm seeing just how lousy browsers are at page layout. Am I asking too much of my computer and the Internet to want to get data out of an online database and print it?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question Question
Searching for a string that contains brackets
Replies
0
Views
503
Alt255
Alt255
jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
539
lmcate
lmcate
scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
Camila James
  • Locked
  • Question Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
418
lucasbrown
lucasbrown

Part and Inventory Search

Sponsor

Back
Top