CODEWITHSUNDEEP
javascripthtmlcss
Alex Gordon
Alex Gordon

Reputation: 60691

applying varying styled text

when i write a paragraph i would like the text to look like this:

alt text http://img6.imageshack.us/img6/9894/fullscreencapture282010.jpg

is it something that i have to do in css? i want similar formatting.

Upvotes: 1

Views: 55

Answers (2)

Doug Neiner
Doug Neiner

Reputation: 66191

For something like this, a minimum and maximum font-size is specified, then a range is associated with the terms (less important to most important). When the terms are written to the page, you combine the values to get the actual font size, somewhere between the minimum and maximum size.

The final output looks something like this:

<ul id='tags'>
   <li style="font-size: 12px"><a href="/tags/normal-term">Normal Term</a></li>
   <li style="font-size: 8px"><a href="/tags/small-term">Small Term</a></li>
   ....
</ul>

And then the CSS looks like this:

#tags { line-height: 16px /* Max font size */ }
#lags li { display: inline; margin-right: 10px}

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630349

You could do this by having a few different styles:

CSS:

 .level0 { font-weight: normal; }
 .level1 { font-weight: bold; }
 .level2 { font-weight: bold; font-size: 1.1em; }
 .level3 { font-weight: bold; font-size: 1.2em; }
 //etc...

Html:

<div>
  <a href="#" class="level0">Tag1</a> 
  <a href="#" class="level3">Tag2</a>
  //etc..
</div>

When you render the section out server-side, just plug in the appropriate level numbers to stick in your answers, e.g. top 3 get level10, next 3 get level9, and so on...just some algorithm looks good to you.

Upvotes: 4

Related Questions