Evenly Spaced Text

  • I posted this in another forum and got 1 response which did not help, hoping I will find more success here:

    I have a wordpress site located at https://www.adamonfire.com/home .

    The site is for a band.

    The site is running exactly how I want it… except: on the ‘Music’ page there is a link to a ‘Bass Tab’. Guitar tabs (for those of you who are not musical) have to be written in evenly spaced text, just like ascii art.

    My problem is that this page needs to display all the text evenly spaced, but the ‘preformatting’ isn’t doing the trick. Is there any <font> tags etc I could use? Is there a specific font a should make this text? Is there another tag I could use? Is there a way to egt the text to appear exactly the same as it does in notepad?

Viewing 6 replies - 1 through 6 (of 6 total)

  • You could try defining “pre” separately:

    /* CSS Reset
    ————————————————————— */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    font-family: Arial, Helvetica, Verdana;
    font-size: 16px;
    color: #232d30;
    line-height: 24px;
    }

    pre {color:black; font:12px Courier New, Courier, monospace}

    That may dramatically improve the overall look of your tab. Then you just have to be meticulous in it’s creation.

    This looks interesting well, although I have never tried it.

    https://jtab.tardate.com/

    Thread Starter Tirwin

    (@tirwin)

    In this situation would I use the

     tag or simply refereance the line from <div class="xxx">?

    Thread Starter Tirwin

    (@tirwin)

    That worked… genius!

    Unless you have created a class for a div in your css, you will have to assign the “pre” tag to your post content. That kind of makes defining the “pre” element pointless. Perhaps just creating a div class for your tabs and giving it the same font characteristics I mentioned above would be easier?

    Add this to your css:

    .tab {color:black; font:12px Courier New, Courier, monospace; margin: 15px 0 15px;}

    Then make your posts for tabs in the html editor look like this:

    <p style="text-align: center;">Verse</p>

<div class="tab">

G||--------------------------------|----------3-----------------|
D||----------5--------------5--3---|-------------------------3--|
A||--------------------3-5---------|--1--1----------------------|
E||--3--3------3-5-----------------|--------------0-1---1-----1-|

</div>

<div class="tab">

G||--------------------------------|----------3-------------5---|
D||----------5--------------5--3---|----------------------------|
A||--------------------3-5---------|--1--1----------------------|
E||--3--3------3-5-----------------|--------------0-1---1----1--|

</div>

<p style="text-align: center;">Chorus</p>

<div class="tab">

G||--------------------------------|----------------------------|
D||--------------------------------|----------------------------|
A||--------------------------------|--1----1--1-----------------|
E||--3----3---1-3-1-3----1---------|----------------1----1------|

</div>

    Either way should work.

    Looks pretty good, eh?

    Cool. Glad it worked!

    I’m a musician myself. ??

    Thread Starter Tirwin

    (@tirwin)

    Hah, well you will probably understand how much this has been annoying me then lol. Thanks to you all!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Evenly Spaced Text’ is closed to new replies.