The Life and Opinions of David Weichert

I was looking for a minimalist way to use Twitter Bootstrap and Symfony 2 in a clean way. The solution I came up with is as follows:

1. Create a new bundle.
2. Register the bundle.
3. Deploy the resources.

Create a new bundle

I created my bundle by hand, omitting some of the stuff you get when you generate the bundle via php app/console generate:bundle. The folder structure underneath the src directory looks as follows:

-- Acme
   |-- TwitterBundle
       |-- Resources
       |   |--public
       |      |--[TwitterBootstrapFiles]
       |-- AcmeTwitterBundle.php

The content of AcmeTwitterBundle.php is:

<?php

namespace Acme\TwitterBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class AcmeTwitterBundle extends Bundle
{
}

Register the bundle

To register the bundle add new Acme\TwitterBundle\OnTimeTwitterBundle() to the $bundles array in app/AppKernel::registerBundles().

Deploy the resources

To deploy the files just execute php app/console assets:install --symlink web/.

I had a bit of trouble getting Symfony 2 setup properly under PLESK (10.2.0).

I first created a subdomain using the „web“ directory of Symfony 2 as document root for the vhost.

However, I seemed to could not get rid of the errors calling config.php telling me, that app/cache and app/logs were not writeable by the server. After searching the web top to bottom and having a look at the output of php_info() I identified the culprit. PLESK sets open_basedir (the topmost directory that is accessible by your web server) to the document root:

open_basedir var/www/vhosts/<YOURDOMAIN>/ <SUBDOMAINHTTPDOCS>/Symfony/web/:/tmp/

To remedy this place a file called „vhost.conf“ under /var/www/vhost/<YOURDOMAIN>/subdomains/ <SUBDOMAIN>/conf containing directives overriding PLESK’s settings, e.g.:

Now to get the settings into the system run as root:

/usr/local/psa/admin/bin/httpdmng --reconfigure-all

Then restart Apache:

apache2ctl restart

… works like a charm once you figure out to put

xdebug.remote_enable=true

into your php.ini.

Homonyme (auch Teekesselchen genannt) stellen eine besondere Herausforderung bei der Internationalisierung (kurz i18n) von Software dar. So kann zum Beispiel das Wort „game“ im Englischen mit „Spiel“ oder auch mit „Wild“ übersetzt werden. Eigentlich kein Problem, es sei denn in einer Anwendung kommen beide Begriffe vor. So geschehen, in dem genannten Fall, beim Freeciv Projekt.

Die gefundene Lösung ist einfach und bringt lediglich den Nachteil mit, dass die betroffenen msgids im Falle des Scheiterns der Übersetzung nicht mehr ganz so hübsch aussehen. Für die Disambiguierung werden der msgid sogenannte Qualifier vorangestellt, z. B.: msgid „?animal:game“. Diese Qualifier haben nebenbei den Vorteil, dass sie auch für Übersetzer, die nicht Programmierer sind, leicht zu verstehen sind.

Um das Ganze robuster zu machen, bietet es sich an, eine Wrapperfunktion zu schreiben, die den Rückgabewert der gettext-Funktion parst und eventuell noch vorhandene Qualifier (z. B. bei nicht übersetzte Strings) verwirft.

Es gibt unterschiedliche Ansätze Inhalte auf einer Webseite mit CSS vertikal zu zentrieren, so dass z. B. eine Grafik in der Mitte der Seite dargestellt wird, einige davon funktionieren sogar recht ordentlich mit verschiedenen Browsern.

Um es vorweg zu nehmen: CSS2 besitzt keine Eigenschaft um Elemente vertikal zu zentrieren. Eventuell wird es das in CSS3 einmal geben., wie Bert Bos vom W³C treffend anmerkt. Der von ihm vorgeschlagene Weg bedient sich denn auch der CSS Eigenschaft display: table-cell in Kombination mit vertical-align: middle. Im Grunde ist dies ein Nachbau der hergebrachten HTML-Lösung den Inhalt im Layout mittels einer Tabelle zu zentrieren (<td valign="middle">). Da die vertical-align Eigenschaft in CSS sich nur auf Tabellenzellen oder inline Elemente Anwenden lässt (s. CSS 2.1 Specification), bewirkt sie bei Blockelementen wie <div> ohne Verwendung von display: table-cell nicht den gewünschten Effekt. Eine wenig elegante Lösung, denn eigentlich handelt es sich ja nicht um eine Tabelle.

Ein grundsätzliches Problem ist, dass die Höhe der auf dem Bildschirm sichtbaren Fläche mit der Auflösung und der Größe des Browserfensters variiert. Außerdem ist die Länge des Inhalts nicht notwendigerweise gleich der Höhe des Bildschirms, so dass möglicherweise vertikal gescrollt werden muss. Dem begegnet ein anderer verbreiteter Ansatz, bei dem ein Block Element (z. B. <div>), dessen Dimensionen bekannt bzw. festgelegt sind, anhand eines vorherigen Elements oder eines als Container fungierenden Elements positioniert wird. Dabei wird das Element anhand dessen ausgerichtet wird mittels Prozentangaben so positioniert, dass sein oberer Rand mit der Hälfte des angezeigten Bereichs abschließt. Das Element, dass die Inhalte enthält wird dann, um die Hälfte seiner Größe nach oben verschoben (was möglich ist, da seine Dimensionen bekannt sind). Außer der Tatsache, dass diese Methode mit weiterem Aufwand verbunden ist, wenn verschiedene Browser und Plattformen unterstützt werden müssen, ist sie auch nicht sehr elegant. Es wird ein Hilfselement eingeführt, dass nur für Layoutzwecke nötig ist. An eine Separierung von Content und Layout, was ja eines der Hauptanliegen beim Verzicht auf Layout mit HTML Elementen ist, ist nicht mehr zu denken.

Links

• Bert Bos: Web Style Sheets. CSS Tips & Tricks. Horizontale und vertikale Zentrierung
• Joe Gillespie: Vertical Centering with CSS
• Lauri Raittila: Vertical centering using CSS
• Dead Centre
• CSS vertical centering using float and clear
• Vertical Centering in CSS. Yuhu’s Definitive Solution with Unknown Height.
• How to: vertical centering with CSS