2
<div class="container">
    <h1>this is cool typograp right</h1>
</div>

so i want separate each h1 word and styling them with list-item and dynamic size each word it will be :

this
is
cool
typograp
right

lets say the container is 100px so each word wrap differently ("this" will be big enough to fill 100px of container, "is" is more bigger than "this" to fill 100px because just two letter right, and other same schematic)

lettering.js as far as i know just separate them, it easy if just styling static text.

thanks for ur time guys

ramonaf
  • 23
  • 2
  • So you want the part of the styling or what? I can show you how to style each word but you will have to come up with the style. ;) And ofcourse, Welcome to Stackoverflow ^.^ Edit: Does it allways show the same text? Or will a user be able to set the text manually or is it a static text? – Teun Pronk Nov 30 '11 at 13:30
  • part styling of word and no, not always this text, so it will be fit with another combination word, may need some jquery syntax,not sure.hey thanks really nice place here – ramonaf Nov 30 '11 at 13:43
  • What do you mean by 'dynamically size each word'? – David Thomas Nov 30 '11 at 14:14
  • hey sorry...i mean if i have another text it will be fit on the parent div, example: if i have word "is" it will be sized match with parent, so the schema is if the word have two letter the size is Xpixel, if five the size will be Xpixel...and so on. edit* not match in size but match in display parent div, not less or not showing overflow – ramonaf Nov 30 '11 at 15:00
  • thomas, same case with http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container i know u know this question – ramonaf Nov 30 '11 at 15:11

2 Answers2

1

This works pretty well:

var words = $('h1').text().split(' ');
$('.container').empty().append('<ul />');
for (i=0;i<words.length;i++){
    $('<li />').text(words[i]).appendTo('.container ul');
}

JS Fiddle demo.

Though be careful using classes and just element-names, since the above would apply to all h1 elements and all .container elements. An id based selector would be much more refined and less accident-prone.

Although re-reading your question I fail to understand what you want, besides moving each word into its own list-item. Dynamically sizing and styling the words/elements? Based on what..?

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • great, its just example, so can this count letter of li so it will fit with parent div, all combination words – ramonaf Nov 30 '11 at 14:21
  • hey thomas sorry for your confusing newbie english and code, now im digging on the this question http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container its same but need extra time to me to understand – ramonaf Nov 30 '11 at 15:14
  • ok may it work with your code combine with fitText.js...btw thanks for your help – ramonaf Nov 30 '11 at 15:34
0

Okay check this jsfiddle I made. It splits the string in your <h1> tag and puts them in an array. Then ill loop through the array and put each word in the <div class="container">

After that I remove the string from your <h1> tag to prevent the page to display that one again.

Demo: http://jsfiddle.net/KJuZn/

Let me know what else you need for this to be done :)

Edit: Maybe even better, you fix the part of the filling out and ill put it in there? ;)

Teun Pronk
  • 1,367
  • 12
  • 24
  • wow cool,so how i styling them, it base length or have class for each?can you give me some example with colored container? – ramonaf Nov 30 '11 at 14:07
  • is there a maximum amount of words? – Teun Pronk Nov 30 '11 at 14:14
  • for the changing the text size take a look at this: http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container The link to that plugin is no longer valid but there is still a lot of useful information in it. Good luck ^^ – Teun Pronk Nov 30 '11 at 14:32