Print 🖨 PDF 📄 eBook 📱
BARITONE ## - - LIVE PERFORMANCE SPRINGBOARD - - 25 RANDOM SONGS - - Listings by Artist - - BASS GUITAR - - ALL SONGS - - Bill Chase - - ALL OTHER WORK - - COLLECTIONS - - BEATLES NIGHT - - Baritone with Bill - - Genre, Category, or Situation TENOR UKE ## - - PIANO - -

Observed Formatting Problems

Problem Songs (Poor Formatting)

  • “Beth I Hear you

  • “Wonderful Lily”

  • “Unicorn Song, The” – Multiple

Well-Formatted Songs

  • “Lady”

  • “Achy Breaky Heart” – Excellent

Root Causes of Formatting Anomalies

1. Missing <pre>
Tags

Songs without proper preformatted text tags lose their spacing and
line structure during HTML-to-PDF conversion.

Use Tags

  • <pre><span style=”font-family: trebuchet ms, geneva, sans-serif;”><span style=”font-size: 14pt; font-weight: 900;”>
  • Close with  </span></span></pre>
  •  

    2. Inconsistent Line Break Usage

    • Single <br>
      tags vs. double <br></br>

    • Mix of <br> and
      paragraph breaks

    • Missing line breaks between sections

    3. Whitespace Not Preserved

    HTML collapses multiple spaces by default. Without proper
    preservation, chord positioning above lyrics fails.

    4. Inconsistent Section Separators

    Some songs use dashes (– – – –), others use
    nothing, creating visual inconsistency.

    Critical Formatting Rules

    The WordPress HTML Template (MANDATORY STRUCTURE)

    Use this exact structure for every song post:

    <pre style="font-family: 'trebuchet ms, geneva, sans-serif; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;"> [SONG TITLE] Artist: [ARTIST NAME] Key: [KEY] | Capo: [POSITION] | Difficulty: [LEVEL] Have everything exactly as you want it to print inside the <PRE> tags.

</pre>

    Why each attribute matters:

    • font-family: 'trebuchet ms, geneva, sans-serif;'

    • Consistent look and feel.

    • If monospace spacing is essential, use 'Courier New'
      monospace       – Ensures fixed-width characters for chord
      alignment

    • font-size: 14px –
      Readable size that fits well on page

    • line-height: 1.6 –
      Proper spacing between lines

    • white-space: pre-wrap
      – Preserves spaces while allowing text wrapping

    • word-wrap: break-word – Prevents long words from
      breaking layout

    Rule 3: Section Separators

    Use this exact separator between all sections:

    ================================================================================

    • Exactly 80 equals signs

    • One blank line before

    • One blank line after

    • Creates clear visual separation

    Rule 4: Chord Positioning

    Chords must be positioned using spaces only (not
    tabs):

    ✅ CORRECT:

        C                 Dm Beth I hear you callin'        Em           Am    G But I can't come home right now

    ❌ WRONG:

    C       Dm Beth I hear you callin' Em      Am      G But I can't come home right now

    Method: Count spaces to position chords directly
    above where they change in the lyric line.

    Rule 5: Blank Lines for Readability

    Use blank lines strategically:

    [VERSE 1]                     ← 1 blank line after section header     C                 Dm Beth I hear you callin'        Em           Am    G But I can't come home right now                     ← 1 blank line between chord/lyric pairs     F              G Me and the boys are playin'

    Rule 6: Section Header Format

    Headers should be in square brackets with consistent
    capitalization:

    [INTRO] [VERSE 1] [VERSE 2] [PRE-CHORUS] { CHORUS } [BRIDGE] [INSTRUMENTAL] [OUTRO] [FINAL VERSE]

    WordPress Editor Settings

    Block Editor (Gutenberg)

    1. Add a Custom HTML block
      (not a paragraph block)

    2. Click the three dots (⋮) in the
      block toolbar

    3. Select “Edit as HTML”

    4. Paste your formatted song content

    Classic Editor

    1. Click the “Text” tab
      (not “Visual”)

    2. Paste your formatted song content

    3. NEVER switch back to Visual editor after
      pasting

    Critical Warning

    ⚠️ NEVER use the Visual Editor after adding your
    formatted song content

    The Visual Editor will:

    • Strip your <pre>
      tags

    • Collapse multiple spaces

    • Remove line breaks

    • Destroy chord alignment

    Quality Control Checklist

    Before publishing any song post, verify:

    • [ ] Entire song is wrapped in
      <pre> tags with proper style attributes

    • [ ] All sections separated by
      80-character separator lines

    • [ ] Chords positioned with spaces
      (no tabs)

    • [ ] Section headers in square
      brackets

    • [ ] Consistent blank line spacing

    • [ ] Song metadata at top (Title,
      Artist, Key, Capo, Difficulty)

    • [ ] Preview in WordPress shows
      proper formatting

    • [ ] Test PDF generation shows proper spacing

    Testing Your Format

    Step 1: Visual Inspection in WordPress

    After saving as draft, check that:

    • Chords appear directly above their
      corresponding lyrics

    • Lines don’t run together

    • Sections are clearly separated

    Step 2: PDF Test Generation

    Generate a test PDF with just 1-2 songs:

    • Chords should remain above lyrics

    • No text should run together

    • Section separators should be clear

    • Page breaks should not split chord/lyric pairs

    Step 3: Font Rendering Test

    View the PDF at 100% zoom:

    • All characters should be same
      width (monospace)

    • Vertical alignment should be
      perfect

    • No characters should overlap

    Common Mistakes and Solutions

    Mistake 1: Copying from Tab Sites

    Problem: Copying from Ultimate Guitar or similar
    sites often includes hidden formatting.

    Solution:

    1. Copy text to Notepad or TextEdit
      first

    2. This strips all formatting

    3. Then apply the template structure

    4. Position chords manually with spaces

    Mistake 2: Using Word Processors

    Problem: Copying from Microsoft Word or Google
    Docs includes formatting codes.

    Solution:

    1. Use plain text editor (Notepad,
      TextEdit, VS Code)

    2. Save as .txt file

    3. Copy from .txt into WordPress HTML editor

    Mistake 3: Tab Characters

    Problem: Tab characters appear as spaces but have
    variable width.

    Solution:

    1. Search and replace all tabs with
      spaces in text editor

    2. In most editors: Find \t,
      Replace with 4 spaces

    3. Manually adjust chord positions after replacement

    Mistake 4: Smart Quotes

    Problem: Curly quotes (" "
    ' ') from word processors cause issues.

    Solution: Search and replace:

    • " and "
      → "

    • ' and ' → '

    Mistake 5: Special Dashes

    Problem: Em-dashes (—) and en-dashes (–)
    instead of hyphens.

    Solution: Replace all with standard hyphen-minus
    (-)

    Template Examples

    Example 1: Simple Song Format

    <pre style="font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;"> WONDERWALL Artist: Oasis Key: Em | Capo: 2nd fret | Difficulty: Beginner ================================================================================ [INTRO] Em7  G  Dsus4  A7sus4  (x2) ================================================================================ [VERSE 1] Em7              G Today is gonna be the day            Dsus4                A7sus4 That they're gonna throw it back to you Em7               G By now you should've somehow   Dsus4              A7sus4 Realized what you gotta do ================================================================================ { CHORUS }         C        D           Em Because maybe, you're gonna be the one that saves me     C    D      Em And after all         C    D    Em You're my wonderwall ================================================================================ </pre>

    Example 2: Song with Comments

    <pre style="font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;"> LET IT BE Artist: The Beatles Key: C | Capo: None | Difficulty: Easy ================================================================================ [INTRO] C  G  Am  F  C  G  F  C ================================================================================ [VERSE 1]       C           G When I find myself in times of trouble Am          F Mother Mary comes to me C                G              F    C Speaking words of wisdom, let it be *Note: Play G gently on "wisdom"* ================================================================================ [CHORUS - REPEAT 2X]         F  C           G Let it be, let it be         Am       F Let it be, let it be         C              G              F    C Whisper words of wisdom, let it be ================================================================================ </pre>

    Advanced Formatting

    Handling Long Lines

    If a line of chords or lyrics exceeds 80 characters:

    C                    G                    Am This is a very long line of lyrics that needs to continue on and on F                    C                    G And it keeps going even longer than you might expect

    The word-wrap: break-word in your style will handle this
    automatically.

    Multiple Chord Changes Per Syllable

    When chords change rapidly:

        C  C/B  Am  Am/G The chord changes are quick here

    Use double space between chords when they’re very close together.

    Instrumental Breaks with Notation

    [INSTRUMENTAL - 8 bars] | C    | G    | Am   | F    | | C    | G    | F    | C    | *Guitar solo over verse progression*

    Troubleshooting Guide

    Issue: Chords Don’t Align in PDF

    Diagnosis: Using proportional font or missing
    <pre> tags

    Fix:

    1. Ensure <pre>
      tag includes font-family: 'Courier New', monospace

    2. Verify all chords positioned with
      spaces (no tabs)

    3. Check that font-family is being preserved in PDF generation

    Issue: Text Runs Together

    Diagnosis: Line breaks being stripped during
    conversion

    Fix:

    1. Verify content is inside <pre>
      tags

    2. Check that white-space:
      pre-wrap       is in style attribute

    3. Ensure line breaks exist in source (view HTML)

    Issue: Sections Not Separated

    Diagnosis: Missing or inconsistent separators

    Fix:

    1. Add exactly 80 equals signs
      between sections

    2. Ensure blank line before and after
      each separator

    3. Use consistent separator throughout song

    Issue: Special Characters Garbled

    Diagnosis: Encoding issues or smart quotes

    Fix:

    1. Replace all smart quotes with
      straight quotes

    2. Replace special apostrophes with
      standard '

    3. Ensure WordPress post is saved with UTF-8 encoding

    Issue: Inconsistent Font Size

    Diagnosis: Multiple font-size declarations or
    missing style

    Fix:

    1. Set font-size once in <pre>
      tag style attribute

    2. Remove any internal <span>
      tags with size declarations

    3. Test that 14px renders properly in both WordPress and PDF

    Automation Tips

    Text Editor Macros

    Create macros in your text editor for:

    • Adding <pre>
      wrapper with full style

    • Adding section separators

    • Converting tabs to spaces

    Example VS Code Snippet

    {   "Song Template": {     "prefix": "song",     "body": [       "<pre style=\"font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;\">",       "${1:SONG TITLE}",       "Artist: ${2:Artist Name}",       "Key: ${3:C} | Capo: ${4:None} | Difficulty: ${5:Beginner}",       "",       "================================================================================",       "",       "[VERSE 1]",       "",       "$0",       "",       "================================================================================",       "</pre>"     ]   } }

    WordPress Bulk Update

    If you need to fix multiple existing posts:

    Manual Method

    1. Open each post in HTML edit mode

    2. Select all content

    3. Wrap in proper <pre>
      tag with styles

    4. Add section separators if missing

    5. Fix chord spacing with spaces

    6. Save and test PDF generation

    Programmatic Method (Advanced)

    If you have database access, you can create a SQL script to:

    1. Add <pre>
      wrapper to all posts in specific category

    2. Standardize section separators

    3. Bulk test PDF generation

    ⚠️ Always backup database before bulk updates

    Final Recommendations

    DO

    ✅ Always use the complete <pre> tag with all
    style attributes ✅ Position chords with spaces only ✅ Use
    consistent 80-character separators ✅ Test PDF output before
    publishing ✅ Keep a template file to copy from ✅ Use plain text
    editor for initial formatting

    DON’T

    ❌ Ever use WordPress Visual Editor after adding formatted
    content ❌ Use tabs for positioning chords ❌ Copy directly from
    word processors ❌ Mix different formatting styles within a song ❌
    Forget to include metadata (Artist, Key, Capo) ❌ Skip the quality
    control checklist

    Summary

    The key to consistent, professional-looking song chord sheets in
    your PDF e-books is:

    1. Structural Consistency
      – Same HTML structure for every song

    2. Proper Tag Usage
      – Complete <pre> tag with all style attributes

    3. Monospace Font –
      Ensures chord alignment

    4. Space-Based Positioning
      – Never tabs

    5. Clear Separators
      – Visual section breaks

    6. Testing – Always verify in PDF before final
      publication

    By following this guide exactly, you will eliminate all formatting
    anomalies and produce professional-quality PDF songbooks from your
    WordPress posts.

    Document Version: 1.0
    Last Updated:
    November 1, 2025
    For: E-Book Maker WordPress
    Plugin v1.0.6+

Print Friendly, PDF & Email