0

I have a title and a link that have to fit in a very specific width and height. If the title is too long I adjust the margin above with a class so it moves up. I am doing this with

<h2 <? if(strlen($report['title']) > 26) echo 'class="longer"';?>>Title text</h2>

26 is a value I played with that fit most title examples. However there is a rogue title that although > 26 in length, is using smaller words like "in" and "the" so it does not break into 3 lines like it's other >26chars counterparts.

In the screenshot you see 1. The "long but not 3 lines" example, 2. A normal length, 3. A longer, adjusted length.

enter image description here

How do you handle this type of scenario? (These divs are left aligned so the "See full report" must remain in the same vertical position across all examples before anyone recommends just making it flow after the title).

I resorted to using JS in the end (jQuery) to count line lines, but Chrome incorrectly reports some as 3 lines when infact it is only 2, Firefox worked as expected. The Chrome issue is strange because despite having exactly same heights, 1 would report as 2 lines, the other 3. Very odd.

var divHeight = $(this).outerHeight();
var lineHeight = parseInt($(this).css('lineHeight'));
var lines = Math.round(divHeight / lineHeight);

 if(lines > 2)
     $(this).addClass('longer');

I also tried basing it on height but again, browser/platform differences made this pretty unreliable.

Titan
  • 5,567
  • 9
  • 55
  • 90
  • So what's your question? – Mr. Alien Jun 25 '13 at 08:14
  • I think you can't do that in php, the only way is javascript where you can get the height of the element and change the margin accordingly. – jcubic Jun 25 '13 at 08:14
  • Unrelated, but relevant: please don't use the short openingtag (``) [check this post for several good reasons](http://stackoverflow.com/questions/200640/are-php-short-tags-acceptable-to-use) – Elias Van Ootegem Jun 25 '13 at 08:16
  • OK, I thought there might be a clever solution for analysing word lengths and word length desity. – Titan Jun 25 '13 at 08:17
  • @EliasVanOotegem understood, our code only (and will only) run on 5.4+ servers. – Titan Jun 25 '13 at 08:18
  • @jcubic OK I'm starting to think I'll have to resort to JS. Thank you – Titan Jun 25 '13 at 08:26

1 Answers1

1

You should not do it at PHP side. This is what CSS is for, see this question/answer: https://stackoverflow.com/a/8865463/208067 and this link http://css-tricks.com/vertically-center-multi-lined-text/

Basically, you use two elements, one vertically centered inside of the other. The outer container sees the inner element as a single line, the inner element adjusts its height depending on how many text it has.

Edit: as text rendering changes depending on the font, browser and OS, if CSS is not an option, last option is to use javascript.

Community
  • 1
  • 1
Ast Derek
  • 2,739
  • 1
  • 20
  • 28
  • A nice technique but it doesn't solve the issue I have unfortunately, it just puts me back to how I had it http://alturl.com/z4udt I think I'm going to have to resort to JS – Titan Jun 25 '13 at 08:25