2

I'm trying to get a semi-transparent background that "follows" the text: i.e. the background should not be a rectangular box, but rather a "jagged box" that stops at each linebreak.

Like this:

Text background is a jagged bo

I do this with the following style:

p {
  display: inline;
  background-color: rgba(0, 0, 0, 0.5); 

  font-family: "Montserrat";
  font-size: 18px;
  /* Add spacing between lines */
  line-height: 28px;
  /* Make sure background covers space between lines */
  padding-bottom: 6px;
}

An example can be seen here: http://jsbin.com/texala/6

The problem is that Firefox and Chrome renders these differently. The two browsers are using the exact same .woff font (not .woff2) and trying all different resets from cssreset.com still doesn't work.

The problem

What you can see here is that the background from each line is overlapping in Firefox but not in Chrome.

Chrome line-height + padding rendering Firefox line-height + padding rendering

I'm using OS X 10.7.5 with Firefox 35.0.1 and Chrome 40.0.22.14.111

I know that font rendering is different from platform to platform and browser to browser, but with an explicitly set line-height and font-size (and padding) in pixels -- isn't one of these two renderings wrong?

Furthermore - does anyone have a solution to this problem so that the background covers all the space between the lines with no overlap in both Chrome and Firefox?

qff
  • 5,524
  • 3
  • 37
  • 62
  • Note to self: http://stackoverflow.com/questions/28363186/inline-elements-and-line-height – qff Feb 06 '15 at 21:26

2 Answers2

1

Maybe with other line-height?:

p {line-height: 158%;}
fcastillo
  • 938
  • 1
  • 11
  • 24
-2

Positioning of the CSS reset within the entire document structure is key. However, for this specifically,

p{display:inherit;text-align:justify};

Edit

Read up on using EM and REM. It is superior to pixels in every way.

p{line-height:1.61em};

Joseph Casey
  • 1,283
  • 1
  • 14
  • 34
  • But this makes the background a rectangular box -- which is what I _dont_ want -- I want to keep the jagged lines, but avoid the background color overlap between lines – qff Feb 06 '15 at 21:27
  • lol, my bad. I was reading this wrong because it was too long. – Joseph Casey Feb 06 '15 at 21:34