dotvoid.com » css

Background color for inline text

Danne — Tue, 11 Oct 2011 12:47:35 +0000

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

, 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
. 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


  
  


  
  
  
    
      Ground round 

salami pig, meatball short loin frankfurter 

short ribs pork hamburger rump 

strip steak beef ribs T-bone salami ham hock.
    
  





		
			Subscribe to the comments for this post?
		
		
			Share this on del.icio.us
		
		
			Share this on Facebook
		
		
			Post on Google Buzz
		
		
			Share this on LinkedIn
		
		
			Share this on Plaxo
		
		
			Stumble upon something good? Share it on StumbleUpon
		
		
			Tweet This!

Site architecture based on Zend Framework

Danne — Fri, 09 Oct 2009 11:48:54 +0000

After working on the Swedish weather site klart.se for awhile I now work on my own projects again. So I have switched Codeigniter to Zend Framework again.

After a trip to Dublin I finally launched the beginning of a new social tourist Dublin guide. It is exactly the same site as both the Swedish Fuengirola guide as well as the English Fuengirola guide I launched after living there for five months. The functionality is somewhat basic as of yet but every now and then I’ll add something more.

Basing three different sites, even though they are very similar, using two different languages gives me the possibility to try out several parts of Zend Framework. It also requires a good design both in the backend and frontend to keep it maintainable. I thought maybe some people would be interested in a basic overview of the different parts needed to put everything together.

Backend

The sites aren’t really that complicated. On a basic level there is a MySQL database and a database layer using Zend_Db/Zend_Db_Table, there is a Zend Framework MVC architecture using models, controllers, views, layouts with Zend_Layout as well as a few view helpers and some HTML, CSS as well as Javascript. All commonly needed. There is more needed to make it a sitethough.

I want as little configuration per site as possible but I naturally still use Zend_Config_Ini for settings. Zend_Registry is needed to keep the global scope clean and is used to store instantiated objects that need to be available throughtout the website logic.

I have been a bit particular on using ZF as often as possible on these sites. With few exceptions. Thus I also use Zend_Form, Zend_Locale, Zend_Translate, Zend_Cache and more. Zend_Cache is really a no brainer and mainly used to speed up translations. This is extremely easy as Zend_Translate and Zend_Locale both are connected to the cache with one simple method call each. It is not complete but how simple this is to setup is illustrated by the below code.

$configuration = new Zend_Config_Ini(
    APPLICATION_PATH .'/config/app.ini',
    APPLICATION_ENVIRONMENT
);
$frontendOptions = array(
    'lifetime' => $config->cache->lifetime,
    'automatic_serialization' => true
);
$backendOptions = array('cache_dir' => $config->cache->dir);
$cache = Zend_Cache::factory(
    'Core',
    'File',
    $frontendOptions,
    $backendOptions
);

$conf_locale = $configuration->locale;
$locale = new Zend_Locale($conf_locale);
$locale->setCache($cache);

Zend_Translate::setCache($cache);
$translate = new Zend_Translate(
    'array',
    APPLICATION_PATH .'/config/translation-' . $conf_locale . '.php',
    $conf_locale
);
$translate->setLocale($conf_locale);

Zend_Form have had a few problems in many versions of ZF. In my opinion it is also a bit bloated and limiting to be used all the way. (Even though I like the automatic connection to the translation functionality in Zend_Translate and the validation through Zend_Validate) So I have settled for a simpler way where I use Zend_Form fully for validation (with Zend_Validate) and then give the view access to the form through a Zend_Form subclass to be able to print the fields individually. I think this is easier to handle than all the overloading and coding needed to fully make Zend_Form create forms as I want them. Another good thing with the form classes is that they too are locale aware and are translated automatically by connecting them to Zend_Translate through the simple line Zend_Form::setDefaultTranslator($translate);. The sub classed Form utility class looks like below. The generated elements are translated automatically. Very convenient.

class Custom_Form extends Zend_Form  {
    /**
     * Render a field
     * @param string $name The name of the form element
     */
    public function _e($name) {
        $e = $this->getElement($name);
        return ($e) ? $e->render() : "Error
Missing <$name> field element";
    }
}

Another thing needed for these sites are to keep the urls understandable and thus translated into the language used on the site. For this the routes, or paths, are kept in the translation file as well. The translated paths are then registered to the router through the use of Zend_Controller_Router_Route and Zend_Controller_Router_Route_Regex objects.

$frontController = Zend_Controller_Front::getInstance();
$router = $frontController->getRouter();
$router->addRoute(
    'route_review',
    new Zend_Controller_Router_Route(
        $translate->translate('route_review'),
        array('controller' => 'review', 'action' => 'index')
    )
);

For image manipulation I haven’t looked further than ImageMagick. After a bit of tweaking you get very good quality when producing different image sizes.

Search

Last but not least, on the backend that is, there’s the search engine. ZF have an implementation of Lucene through Zend_Search_Lucene (derived from the Apache Lucene project). This is the one time I haven’t gone with ZF as I very much like the open source Sphinx search engine as it is so easy to integrate with MySQL. So Sphinx get to power the search.

This is convenient for several reasons. MySQL is not a great full text search engine, Sphinx give you better weighted results. The main reason though is the performance. Sphinx is very fast in itself but for a site with heavier traffic it is as simple as moving the search backend to it’s own machine to get a performance increase.

Frontend

On the frontend there is as clean html as possible to make it easy to change the design with only CSS as well as manipulate the client side with JQuery. If it wouldn’t be for the Google map the site would actually be pretty useful even without no css style at all.

A good practice I learned just recently (remember I’m mostly a backend developer) is to base all javascript functionality on modules that are instantiated depending on element ids present in the html. This makes it a lot simpler to split the javascript functionality into manageble pieces and also makes it a lot easier to maintain.

There are functionality in the client side javascript used to display error messages and information. This makes it necessary to create one javascript file with translation stirngs for each language. The correct javascript translation file is chosen in the layout (template/view file) depending on the current locale.

The map used is (are there any alternatives) Google Maps API. I chose to completely initiate the map by scanning the actual data displayed on the page. This is possible through clean html markup and also means that if I choose to list ten reviews on a page instead of five nothing need to be changed at all in the frontend. Only a loop limit on the backend.

Conclusion

Well. No conclusion. This was just a very basic walkthrough of most of the different pieces needed to create a fairly simple Zend Framework based website. Mostly it was a walkthrough of the bootstrap… I still hope it is useful or at least interesting.

I know I find it interesting to read about other sites and the architecture and design behind them.

Standards are difficult

Danne — Tue, 20 Apr 2004 15:17:48 +0000

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
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

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.