0

I'm designing a website and using jquery UI majorly for the icons/icon-classes it provides.

While testing in chrome what I see the default height of a span element which wraps some text without padding or border gets a height of 20 px.

I understand it will differ with the type of font and size, the defaults and the browser. Is there anyway I can set height of a text to a given size?

Mayank
  • 5,454
  • 9
  • 37
  • 60
  • see also: `line-height` – user17753 Apr 11 '13 at 16:23
  • Likely not, check this; http://stackoverflow.com/questions/5082632/same-font-yet-its-weight-seems-different-on-different-browsers –  Apr 11 '13 at 16:23
  • to override the browser defaults, you can use something like this: http://meyerweb.com/eric/tools/css/reset/ – karthikr Apr 11 '13 at 16:23
  • @user17753 both styles won't have absolute effect in all browsers. It's still relative measurement. @karthikr; Resetting CSS doesn't matter. It will remove margins, paddings and display features, but sadly it won't change the outcome of the font rendering. For example on Safari on OS X the fonts are rendered by OS X's Core libraries, but Chrome will use it's own Chromium (WebKit/KHTML) rendering system, which also support semi-pixel cutting, which can probably also apply on fonts. So based on the `em` styling those two will play bad with each other. Not to talk about OS/Distro differences. –  Apr 11 '13 at 16:24
  • You will have to really test by doing manual browser screen comparisons and maybe find out if you can use `em` styling to have your website behave "similar" in each browser. I've tried it once, and trust me; it will break your brain ;) –  Apr 11 '13 at 16:29
  • The question asks how to set text-height, not for 100% pixel-for-pixel text fidelity across all browsers. – user17753 Apr 11 '13 at 16:30
  • I wonder if that's so. I think the OP knows how to set the font's size/height. The outcome tho, will be horrid in different browsers. I just hope someone knows a solution for him then ;) –  Apr 11 '13 at 16:32
  • @Allendar I know how to set font-size but not height. I don't even know if there is a way to sent font-height :( – Mayank Apr 11 '13 at 19:25
  • 1
    No there is none sadly. The problem mainly is that fonts just get rendered differently due to engine-differences. The will "look" like the font as it is rendered on your system, but are often displayed different in some way. For example; Helvetice Nueue looks pretty different on IE8 than on Safari in OS X. –  Apr 11 '13 at 22:17

1 Answers1

2

If I understand correctly, it seems your facing this problem because of the way different browsers render fonts.

If you font sizes are influencing their parent elements size, then you may need to rethink how you are using margins and padding's.

EDIT
You could use line-height to try and tame the behavior.

Clarkey
  • 698
  • 3
  • 11
  • 28