CODEWITHSUNDEEP
htmlcss
Edward
Edward

Reputation: 9778

How to format HTML/CSS to align with single word in sentence?

I'm not sure how to refer to what I need to do. So here is an example of the formatting.

Where ABC is the Actual Before Calculation
        A is the total population of the US
      XYB is the percentage that own their own homes
      XYC is the percentage in a rural area

Notice how all the sentences are aligned with the word is. It's kind of a smart indenting, for lack of a better term. You have the right term, then please enlighten me.

I've not found an HTML/CSS page that does this, but I have seen it in print. Or would PHP be needed to do this? Thanks!

Upvotes: 1

Views: 371

Answers (4)

AfromanJ
AfromanJ

Reputation: 3932

You can use a Definition List for this:

HTML

<dl>
    <dt>Where ABC is</dt>
    <dd>the Actual Before Calculation</dd>
    <dt>A is</dt>
    <dd>the total population of the US</dd>
    <dt>XYB is</dt>
    <dd>the percentage that own their own homes</dd>
    <dt>XYC is</dt>
    <dd>the percentage in a rural area</dd>
</dl>

CSS

dl {
    border: 3px double #ccc;
    padding: 0.5em;
}
dt {
    float: left;
    clear: left;
    width: 140px;
    text-align: right;
    font-weight: bold;
    color: green;
}
dd {
    margin: 0 0 0 145px;
    padding: 0 0 0.5em 0;
    min-height: 1em;
}

Demo

Upvotes: 4

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382474

You'll have various solutions. Here's one building a table from your unformatted text using jQuery :

var lines = $('#a').text().split('\n');
$t = $('<table>').appendTo($('#a').empty());
lines.forEach(function(l){
  var m = l.match(/(.*)( is )(.*)/);
  if (m) $t.append('<tr><td>'+m[1]+'</td><td>'+m[2]+'</td><td>'+m[3]+'</td></tr>');
});

Demonstration

EDIT : I understood the question as the need to start from a not formatted text. If you can do the formatting by hand, disregard this answer.

Upvotes: -1

Zealot
Zealot

Reputation: 697

You could use a table, I did a quick JSFiddle:

<table>
<tr>
    <td>Where ABC is</td>
    <td>the Actual Before Calculation</td>
</tr>
<tr>
    <td>Where A is</td>
    <td>the total population of the US</td>
</tr>
</table>

JSFiddle

With some CSS you can align the text of the first td on the right:

td:first-of-type {
  text-align: right;
}

Upvotes: 0

Mayank Tripathi
Mayank Tripathi

Reputation: 1352

This might help you http://jsfiddle.net/Ytv8p/1/

HTML

<div> <span class="a">Where ABC</span>
 <span>is</span>
 <span>the Actual Before Calculation.</span>

</div>
<div> <span class="a">A</span>
 <span>is</span>
 <span>the total population of the US</span>

</div>
<div> <span class="a">XYB</span>
 <span>is</span>
 <span>the percentage that own their own homes</span>

</div>
<div> <span class="a">XYC</span>
 <span>is</span>
 <span>the percentage in a rural area</span>

</div>

CSS

span {
    display:inline-block;
    padding:0 2px;
}
.a {
    width:80px;
    text-align:right;
}

Upvotes: 1

Related Questions