4

Here is the fiddle im working with:

http://jsfiddle.net/LbUFg/

The html code is:

<div class="body"> 
  <div class="variation1 font700 green1"> 
    <h2> 
      sample <span class="divider"> arrowshape </span>
    </h2>
  </div>
  <div class="clear"></div>
  <div class="variation2 font700 green2">
    <h2>
      as the  text increases the font size must decrease but the block height must remain same <span class="divider"> as the  text increases the font size must decrease but the block height must remain same </span>
    </h2> 
  </div>
  <div class="clear"></div>

  <!-- OTHER HTML -->

</div>

I want to adjust the text such that it fits in the div without changing the dimensions(size) of the arrow block shown(Text size can change but not the block size). The arrow block must look like the sample arrow and Im facing the issue as shown in variation2. Can someone please help me out with this??

Daniele
  • 1,938
  • 16
  • 24
user2613399
  • 715
  • 1
  • 6
  • 14
  • 1
    If you are happy to use a plugin then http://fittextjs.com/ fits the bill. – Grim... Aug 22 '13 at 15:17
  • May help: http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container – Adam Marshall Aug 22 '13 at 15:29
  • As for the CSS arrows, they're nice, but I would do somethign else--like adding an additional div/span rather than relying on the CSS – Richard Aug 22 '13 at 15:34

3 Answers3

2

try a jquery plugin FITTEXT this will help you

Sobin Augustine
  • 3,639
  • 2
  • 25
  • 43
  • will this plugin give me the desired result of not reducing the dimensions of the arrow block including the pointed(triangular) part as the text fits in it.. Im sorry for asking this because i never used plugins and this will be my first time – user2613399 Aug 22 '13 at 15:36
  • ya, didn't try it on your code, but as the div grows and shrinks it can adjust the font size so as to fit in it. – Sobin Augustine Aug 22 '13 at 15:45
1

You'll have to use javascript. CSS itself can't handle this.

For a poor example:

$(".font700").each(function(i, obj) {
    newSize = $(obj).text().length;
    newSize = 64 - newSize;
    newSize = (newSize < 10) ? 10 : newSize;
    $(obj).css("font-size", newSize + "px");
});

JSFiddle

There will be better solutions than this, by the way. This just demonstrates that it is possible using javascript (jQuery, specifically). You can probably find some plugins such as FitText that can solve a lot of these issues for you.

(Thanks to Grim for the link)

Richard
  • 6,215
  • 4
  • 33
  • 48
  • without using that plugin and using javascript how will it be possible without changing the dimensions of the arrow block( as u can see in ur fiddle the size of arrow block decreased)(Assume the actual size of block is as given for sample text) – user2613399 Aug 22 '13 at 15:33
  • @user2613399 Using CSS to create the arrows isn't the direction I would take. Those arrows are displayable items on the page. I would make the divs or spans so that you have more control over them. – Richard Aug 22 '13 at 15:39
  • can u please give me a sample fiddle for this concept? – user2613399 Aug 22 '13 at 15:43
  • @user2613399 [Fiddle with separate div styled separately](http://jsfiddle.net/LbUFg/3/). That needs work, but that's the idea. – Richard Aug 22 '13 at 15:50
  • @user2613399 Oh, only the bottom one has the separate div, by the way. I didn't do the same with the top one. – Richard Aug 22 '13 at 15:51
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/36097/discussion-between-user2613399-and-richard) – user2613399 Aug 23 '13 at 10:22
0

For those who don't like plugins like FitText, I just played around and calculate the font size to fit in the containing element by looking at the current average letter width (complication:multiple lines, solved here hilariously by temporarily changing the css-width) HTML is 

<div><h1><a><span>Title</span></a></h1></div>

And jQuery:

$("h1").each(function() {
    var l = $(this).text().length;
    var w = $(this).prop("offsetWidth");  //clientWidth doesn't always work
    var old_pos = $(this).find("a").css("position");
    var old_w = $(this).find("a").css("width");
    $(this).find("a").css("position", "absolute");
    $(this).find("a").css("width", "1000px");
    var w2 = $(this).find("span").prop("offsetWidth");
    var h2 = $(this).find("span").prop("offsetHeight");
    var c = 1.2*(w2/h2)/l;  // Current proportion of font width, 1.2 is constant
    var fontsize = w/l/c;
    fontsize = (fontsize<10)?10:fontsize;       //limit min
    //$(this).append(" "+c+"/"+fontsize);  //test
    //Set font size to fill width of parent element
    $(this).css("font-size",fontsize+"px");
    $(this).find("a").css("position", old_pos);
    $(this).find("a").css("width", old_w);
});

This resizes my fonts in a masonry-style grid

Creative Choice
  • 101
  • 1
  • 2