dotvoid.com » html http://www.dotvoid.com Experiments and thoughts in PHP and javascript Tue, 11 Oct 2011 12:49:15 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Background color for inline text http://www.dotvoid.com/2011/10/background-color-for-inline-text/ http://www.dotvoid.com/2011/10/background-color-for-inline-text/#comments Tue, 11 Oct 2011 12:47:35 +0000 Danne http://www.dotvoid.com/?p=477 In searching for a solution to a CSS problem I had I stumbled over another interesting problem, similar to mine. Most people seemed to agree that it
was impossible to do in pure CSS. The effect those people were after is commonly used in magazines where text with a background color is put over an image. A simple effect hard to achieve.

One solution was to surround each line of text using styled span elements. Another solution used ”a teeny weeny jquery” to solve the problem. I’m sure it’s a solid solution but using jquery and javascript to be able to style text is, well, wrong. Forcing editors to add invisible span elements in text is also not a good idea. But - the effect can actually be achieved using css only and still keep the html simple and semantically correct.

If you use a block element, like <p>, and set the background color, it will be  a filled square behind the text. By setting the css display property to inline you get  close to the effect wanted.

So far it is simple. The problem then is that using padding on inline text will only affect the horisontal padding (text indentation) on the first and last line of text. You get the following effect.

In order to get the effect we want we need to add two elements. A surrounding block element (div) surrounding the paragraph and an inline element (span) surrounding the text inside the paragraph. Both of which is semantically without meaning.

First we add a left border on the surrouding block element. Then we move the text in the span element slightly to the left. The background color is set on the paragraph and does not move. Using this neat little trick we simulate text padding or indentation on each line of text.

Finally we need to fix the vertical padding and line height to get rid of the spacing between the text lines. The end result is not perfect. There are still problems when the user resize text and you need to be careful with the spacing in Internet Explorer. But it’s a good start.

Chrome sometimes change line height seemingly in a random fashion when inserting html <br>. Setting white-space to pre-line fix this behaviour. If not for Internet Explorer it could be simplifed further. Internet Explorer does not seem to support white-space: pre-line. So Internet Explorer still needs manually added html breaks.

The full source

<pre>
<html>
  <head>
  <style type="text/css">
  div#column {
    border-left: 6px solid #000;
  }

  p.subs {
    display: inline;
    font: bold 14px/18px arial;
    color: #fff;
    background: #000;
    padding: 1px 0 1px 0;
    white-space: pre-line; /* Not understood by IE, use manual br for IE */
  }

  p.subs span {
    position: relative;
    left: -3px;
  }

  p.subs br {
    display: none;
  }
  </style>


  <!--[if IE ]>
    <style type="text/css">
      p.subs br {
      display: inline;
    }
    </style>
  <![endif]-->
  </head>
  <body>
    <div id="column">
      <p class="subs"><span>Ground round <br />
salami pig, meatball short loin frankfurter <br />
short ribs pork hamburger rump <br />
strip steak beef ribs T-bone salami ham hock.</span></p>
    </div>
  </body>
</html>
]]> http://www.dotvoid.com/2011/10/background-color-for-inline-text/feed/ 0 Standards are difficult http://www.dotvoid.com/2004/04/standards-are-difficult/ http://www.dotvoid.com/2004/04/standards-are-difficult/#comments Tue, 20 Apr 2004 15:17:48 +0000 Danne http://www.commodi.com/?p=71

I have been trying to get dotvoid.com look the same would you prefer Internet Explorer or, as me, Mozilla. I have disregarded Opera even though the few times I’ve tested it, it seemed to be a good enough browser. I just assume Opera has no problems as I try my hardest to stick to the standards. There are a few things bugging me that I still need to sort out though.

First and foremost I am actually very annoyed at the embeddable HTML editing widget in Mozilla. Supporting the same kind of embeddable wysiwyg editor in Mozilla as existing in IE was a great decision. Annoyingly the mozilla team made the editor insert a <BR> instead of a new paragraph when hitting enter. This makes it very hard for me to create a completely xhtml 1.1 compliant site using my own Firesite CMS. Sigh.

Dotvoid.com design

Dotvoid.com design

The menus I have created on the left side of the pages are supposed to look like tabs, which they also do in Mozilla. This effect is easily achieved using CSS and a negative right margin for the menu item which overlays the border of the page content. I don’t explain so good so just look at the above image and you’ll see what I mean. In Internet Explorer I get a thin border between the (active) start menu item and the content. I am sure I’m going about it wrong but I just can’t seem to figure it out.

]]> http://www.dotvoid.com/2004/04/standards-are-difficult/feed/ 0