Friday, December 14, 2012

HTML - background colour change in a sized box using the "span" tag in Blogger


In my opinion Blogger has taken a step backward with the new Blogger Interface - but then my vision of what a blogging interface could be, might be different than those at Blogger. The new interface for example, will not accept CSS; and because all the Blogger Interface widgets run on JavaScript, it can't - and never could - employ user generated, JavaScript, Interface-level creative tools.


Since Firefox launched it's 4.0 Browser - changes to background colour in Blogger have been executed with-in the "span" tag. Before this the 'Text background color' widget in the Blogger Compose interface would change any "background-color;" - inside any tag. Now the widget only works with-in "span" tags --- and "span" tags are very limited as to what attributes they work with.

My goal today was to change the background colour of a box in Blogger with the existing "Text background color" widget - and I'm happy to announce, I've succeeded! :)

This coding will be incorporated into the Blogger Baseball Scorecard coding - so I can use colour notations in any browser when scoring games.

I'm hoping Blogger will institute a 'background area colour change' capability some day - for those of us who want to create more than just words with html in the Blogger Interface. The html5 "canvass" tag holds promise here - but html5 as a popular coding tool is still a few years away I think. Blogger can't support html5 canvass applications in the "Compose" interface because of JavaScript conflicts.

In my opinion Blogger has taken a step backward with the new Blogger Interface - but then my vision of what a blogging interface could be, might be different than those at Blogger. The new interface for example, will not accept CSS, and because all the Blogger Interface widgets run on JavaScript, it can't - and never could - employ user generated, JavaScript, Interface-level creative tools.


"Span" is 'different' than other tags. W3C calls "span", a "generic container", or more specifically, an "inline level generic container".(W3C | "Generic containers - the div and span elements" | http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements)

By playing around with it in Blogger tonight I have discovered that "span" will take attributes other than just "background-color" - it also allows other text related attributes - like "font-size", "line-height" and "margin".

Weird thing about "span" - each tag allows only one attribute (Inside Blogger), and then a closing tag after the content. To add more attributes to the same content one must add another "span" tag before the content, with a different attribute, and then a second closing tag at the end of the statement. One may not span other statements tagged with anything other than a span tag.

In this example the "background-color" is "white". I have coded four "span" tag elements in a row - holding colour, line-height, font-size and margin - followed by four blank spaces, and then four closing "span" tags.

     

The box is a "div" container around four "span" tags that render four 100px high, blank spaces - background coloured "white". With this coding I can change the colour of the area inside the box with the "Text background color" widget in Blogger's "Compose" interface. This is accomplished with three clicks: high-light the area inside the box (left-click and drag); click on the "Text background color" button; select a colour from the pallet. (See four coloured examples below.)





And though an accident I also discovered an obvious truth, one can colour each character in the same word a different colour. So in this coding the browser renders a specific, changeable colour in an empty box. In this example the font-size and the line-height are both set to 100px, and the text that I'm background colouring are blank spaces - so in this case with a box of this size, you can colour a box as many as four different colours!


   
   
   
   



There is no limit to the size that you can set the "font-size" and "line-height" to - so any sized box you like. By increasing the font-size and line-height (only bigger than the container size), one can make the 'swaths' of colour wider and narrower. By adjusting "margin" you can move them left and right.


    





Correction: Apparently I can add multiple attributes per "span" tag, and close "span" tags in-line --- as in the example above (highlight, view selection source).



mh

No comments:

Post a Comment