Posts Tagged ‘CSS’

Dienstag, 20. Mai 2014

Die Tagesanzeiger-Paywall (eher: das Lehmmäuerchen) umgehen

In den letzten Monaten haben sich die Paywalls der traditionellen Zeitungen im Internet gehäuft: Die New York Times macht, die NZZ auch – und seit kurzem auch der Tagesanzeiger. Aus meiner Sicht war es auch wirklich an der Zeit, dass die Medienhäuser den von ihnen generierten Mehrwert entsprechend schützen und von den Konsumenten vergüten lassen. So wie man das seit Jahrhunderten in der Printpresse auch macht (wobei man anmerken muss, dass bei der Printpresse die Mehrheit der Einnahmen aus der Printwerbung stammen).

Doch wenn man eine Internet-Paywall aufbaut, welche angeblich drei Millionen Schweizer Franken gekostet haben soll, sollte sie dann aber auch der Chinesischen Mauer entsprechen, und nicht einem Lehmmäuerchen oder einem morschen Lattenzaun.

Nachdem man nämlich die maximale Zahl an kostenlosen Tagi-Artikeln gelesen hat, kriegt man die Artikelseiten weiterhin mit dem kompletten Inhalt ausgeliefert. Nach kurzer (oder längerer Ladezeit) wird mit CSS ein halbtransparenter Overlay eingeblendet, welcher den Internetbenutzer auffordert, ein Abonnement abzuschliessen.

Diese “CSS-Wall” umgeht man unter Google Chrome folgendermassen:

  1. Stylebot herunterladen und installieren
  2. Rechtsklick auf CSS-Icon
  3. Optionen
  4. Stylebot Options
  5. Styles
  6. Edit Global Stylesheet

Dort gibt man ein:

div#overlay_wrap {
	display: none;
}

Abspeichern, Browser neu starten – et voilà!

Sollte diese Massnahme aus irgendeinem Grund nicht klappen, kann man Stylebot immer noch mittels Druck auf Alt+M aktivieren, auf die dunkle Overlay-Fläche klicken (#overlay_wrap) und im Abschnitt “Layout & Visibility” den Wert “Visibilty” auf “Hide” setzen.

Tags: , , , , , ,
Labels: Web

5 Kommentare | neuen Kommentar verfassen

Samstag, 4. Juni 2011

Urheberrechtlich geschützte Schriften in Web-Sites einbetten: Das Kleingedruckte

Da nahm mich doch Wunder, wie das mit dieser offensichtlich nicht standardmässig in Web-Browsern vorhandenen Schrift läuft, und schon mit dem ersten Blick auf den Source-Code das Aha-Erlebnis:

/*
 * MyFonts Webfont Build ID 827491, 2011-05-31T06:11:53-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Houschka Rounded Medium
 * URL: http://new.myfonts.com/fonts/fw-g-type/houschka-rounded/medium-81542/
 * Foundry: G-Type Collection
 * Copyright: Copyright (c) 2008 by G-Type Designed and digitized by Nick Cooke. All rights reserved.
 * License: http://www.myfonts.com/viewlicense?1056
 * Licensed pageviews: 90,000/month
 * CSS font-family: HouschkaRounded-Medium
 * CSS font-weight: normal
 * 
 * (c) 2011 Bitstream Inc
*/

Licensed pageviews: 90,000/month. Tönt kompliziert. Und teuer.

Tags: , , ,
Labels: Allgemein

Keine Kommentare | neuen Kommentar verfassen

Mittwoch, 14. April 2010

Helvetica wird unter Windows hässlich gerendert




Helvetica rendered like shit on Windows

Originally uploaded by emeidi

Heute habe ich ein Bildschirmfoto einer von mir entwickelten Web-Site zugeschickt erhalten — und musste mich angesichts des Font-Renderings fast übergeben. Wie sich nach einigen Nachforschungen herausgestellt hat, ist auf dem System des Kunden ein Helvetica-Paket in Form von TrueType-Schriften installiert. Diese Schriftart wird nun aber sowohl im Internet Explorer als auch im Firefox bei kleinen Schriftgrössen äusserst hässlich gerendert; sprich beispielsweise stimmt das Kerning bei “de” und ähnlichen Buchstabenkombinationen nicht.

Wieso?

Helvetica is easily my favorite font, but it has one downside: it looks like crap on Windows. The way Windows handles the rendering of Helvetica makes a great font almost unreadable at small sizes.

Quelle: Better Helvetica Font Stack « Minimali.st

Offensichtlich kommt Helvetica ohne anständiges Hinting daher.

Die Lösung ist relativ simpel. Man nehme das Stylesheet und passe es dermassen an, dass anstelle von Helvetica nur noch Helvetica Neue gewählt wird, die auf Windows-PCs in 99 Prozent der Fälle nicht installiert ist. Stattdessen wird bei Windows-Computern dann einfach die gute, alte (und im Grunde hässliche) Arial verwendet. Konkret:

...
font-family: "Helvetica Neue", Arial, sans-serif;
...

Tags: , , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Dienstag, 23. Dezember 2008

Seitenumbruch in der Druckversion von Safari

Heute habe ich mir an Safari 3.2 die Zähne ausgebissen: Der Browser wollte partout keinen Seitenumbruch vor einem div drucken, obwohl ich diesem den CSS-Stil page-break-before:always; zugewiesen hatte.

Safari unterstützt dieses CSS-Attribut eigentlich seit Version 1.2. Doch was zum Teufel? … Unter Firefox wurde der Seitenumbruch vor dem Element tadellos gedruckt und div ist auch wie von W3C gefordert ein Block-Element, weshalb es sich hier offensichtlich um ein Browser-Problem handeln musste.

Nach einigem Pröbeln realisierte ich dann, dass das Eltern-div im CSS, welches für die Druckausgabe verwendet wurde (media="print" für Kenner), gefloated war. Nachdem ich diese Eigenschaft entfernte, wurde der Seitenumbruch problemlos gedruckt.

Tags: , , , ,
Labels: Allgemein

1 Kommentar | neuen Kommentar verfassen

Mittwoch, 20. August 2008

1 Pixel hohe Rahmen mit DIVs realiseren – im Internet Explorer 6

Vor einigen Tagen arbeitete ich an der Umsetzung des Screendesigns für eine neues Web-Projekt. Unter anderem sollte das DIV mit den Inhalten am unteren Rand einen (speziellen) Rahmen erhalten. So speziell, das border-bottom:1px solid #AAAAAA; nicht möglich war. Denn der Rahmen sollte – um einen 3D-Effekt zu ermitteln – mit Versatz beginnen.

“Nichts leichter als das!”, dachte ich mir, und machte mich an die Umsetzung. Unterhalb des Content-DIVs wollte ich ein DIV platzieren, das 1px hoch war und mittels margin-left:4px Links um 4px eingerückt war.

Unter Safari und Firefox gab es keine Darstellungsprobleme. Doch als ich mir das Design mit dem MSIE6 anschaute, fiel ich wieder einmal aus allen Wolken: Der graue Balken war nicht etwa ein, sondern etwa 20 Pixel hoch.

Die Lösung? Natürlich wusste Google rat:

If you need to have a div tag smaller than 20px, then you will find it a bit hard to get on IE. Just add “overflow: hidden” to it’s style and you’re good to go.

Quelle: DIV height issue on IE

Wie ich vor kurzem bereits einmal getwittert habe:

Ich hoffe mir nichts sehnlicher, als das Hostel 3 mit Microsoft Internet Explorer-Entwicklern als Backpacker verfilmt wird.

Guet Nacht!

Tags: , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Dienstag, 19. Februar 2008

Formulare mit CSS (und ohne Zeilenumbrüche) layouten

Wie man Formulare heutzutage layoutet (nämlich mit CSS und nicht etwa Tabellen), verzapfen unzählige Artikel im Netz. Einen sauberen Einstieg bietet beispielsweise Quirksmodes Tableless forms.

Auch hier wird wieder belohnt, wer die HTML-Spezifikationen kennt und spezifische Tags so einsetzt, für was sie eigentlich erdacht wurden. Bestes Beispiel in diesem Zusammenhang: Der <label>-Tag, welcher immer noch nicht allen professionellen Web-Entwicklern bekannt ist.

Eine Sache wird in vielen Artikeln hingegen nicht ausreichend erläutert: Wie kriege ich das Formular-Layout hin, ohne dabei <br>-Tags zu benutzen? (Zeilenumbrüche, für HTML-Unerfahrene – in der Regel <tt clear="all">, um mit dem Floats zurecht zu kommen …)

Heute nun habe ich mich noch einmal mit der Umbruch-Thematik auseinandergesetzt und kann folgende Lösung präsentieren, die zumindest in Firefox 2.x und Safari 3.x zu funktionieren scheint (ich schliesse mich Conrast.ie an und hasse MSIE6 ab heute öffentlich):

label {
 display:block;
 float:left;
 width:200px;
 
 clear:left;
}
input {
 display:block;
 float:left;
 
 clear:right;
}

Wichtig sind die clear-Anweisungen, die das Umbrechen der Floats steuern.

Tags: , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Samstag, 8. September 2007

Tabellenlayout geht in Rente


Kiesen.ch new – Web 2.0
Originally uploaded by emeidi

Kiesen old – Web 1.0
Originally uploaded by emeidi

Da ich die letzten grossen Probleme der Umstellung mittlerweile gelöst habe, kann ich mich nun endlich der technischen Aufarbeitung meiner Arbeit zuwenden.

In den letzten Wochen habe ich die Web-Site der Gemeinde Kiesen einer Frischzellenkur unterzogen. Eine Auffrischung und Anpassung war dringend nötig – die Web-Site hat schon 5 Jahre auf dem Buckel. Ein Alter, das im schnellebigen Web-Bereich eindeutig dem Pensionsalter entspricht.

HTML

Zuerst wurde der HTML-Code des Inhalts tauglich für das Jahr 2007 gemacht. Dabei konnte ich natürlich auf die in den letzten fünf Jahren angesammelte Erfahrung zurückgreifen: Mittlerweile habe ich Tags wie h1-3 und p lieben gelernt. Im 2001 war ich durch eine kurze Anstellung bei nothing etwas verblendet geworden. Anstelle dass ich Überschriften mit dem von W3C vorgesehenen Titel-Tag (h1-6) versah, gab es bei mir so schöne (und sinnlose) Tags wie …

<span class="contentTextTitleFirstLevel">

PHP

Natürlich habe ich im selben Anlauf auch den PHP-Code angepasst – neben einigen problematischen Unterlassungen (XSS lässt grüssen) habe ich auch hier unnötigen Ballast abgeworfen und den Code lesbarer gemacht.

Layout

Der letzte und grösste Brocken war nun aber die Umwandlung eines tabellenbasierten Layouts (perfektioniert bei nothing – damals wohl noch gerade auf der Höhe der Zeit) in HTML/CSS2. Nach hunderten bis tausenden von Reloads (Apfel-R werden wohl auf meiner Tastatur als erstes kaputt gehen) schaut die Site nun wie gewünscht aus. Unter Safari und Firefox mehr oder weniger perfekt – unter Internet Explorer gibt es noch einige kleine Schnitzer, die ich zu beheben versuchen werde.

In Gedanken bin ich bei euch, lieber Bill Gates und liebe Frickler-Truppe des Internet Explorer-Teams. Dass man in Redmond auch 2007 die Sache mit offenen Standards nicht begriffen hat, zeigt wieder einmal die klassische Abstimmung um “Open”XML. Wer mehr über die Besonderheiten des Internet Explorers lesen will, ist bei IE und CSS eindeutig am richtigen Ort.

Tag und Nacht

Oben rechts habe mit dem faszinierenden Tool Websites as Graphs zwei Analysen des Code-Struktur.

Erste Auffälligkeit: Ich komme mit deutlich weniger HTML-Tags aus (jeder Kreis entspricht einem Tag). Dies hängt ganz klar mit dem Wechsel auf CSS zusammen: Einerseits sind in das Stylesheet die Positionierung ausgelagert, andererseits die Formatierung (Farbe, Schriften, Ränder, etc.).

Zweite Auffälligkeit: Tabellen gehören der Vergangenheit an. Jedenfalls dann, wenn sie zur Erstellung eines Layouts missbraucht werden. Auf der neuen Site werden Tabelle nur noch dazu genutzt, tabellarische Daten aufzubereiten.

  • blue: for links (the A tag)
  • red: for tables (TABLE, TR and TD tags)
  • green: for the DIV tag
  • violet: for images (the IMG tag)
  • yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
  • orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
  • black: the HTML tag, the root node
  • gray: all other tags

W3C ist pingelig und nervt

Als ich die frische Titelseite dem W3C HTML Validator zur Begutachtung vorlegte, kam ich natürlich – wie immer – nicht ohne Fehlermeldungen durch …

Vorhang auf! Halt …

Wohl im Laufe der nächsten Woche – sobald alle ausstehenden Tests durchgeführt werden konnten – werde ich die neue Version produktiv schalten.

Tags: ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Samstag, 8. September 2007

doctype strict und die vertical gap

Heute habe ich mir an einem CSS-Layout die Zähne ausgebissen:

Nachdem ich den doctype des HTML-Dokuments von transitional nach strict geschaltet habe, um das nervige Box-Model des Internet Explorers auszutricksen (Tabellen mit width="100%" in einem div sind in Firefox, Safari und Opera so breit wie gewünscht, nur der Internet Explorer zerschiesst das ganze Layout), gab es einen vertikalen Abstand von ca. 4 Pixeln zwischen einzelnen divs wie #header und #content.

Nach stundenlangem Pröbeln und mehreren erfolglosen Google-Suchen zum Thema fand ich endlich den massgeblichen Hinweis:

This time we set the vertical-align property of the object element to bottom. This aligns the bottom of the object with the bottom of the line box, eliminating the small gap we saw earlier.

Quelle: That mysterious gap under images and embedded objects

Ehrenwort? Wirklich? JA! Nachdem ich im Stylesheet

#header img {vertical-align:bottom;}

postuliert hatte, verschwand die nervige Spalte zwischen der Kopfzeile und dem Inhalt der Web-Site. Herueka!

Tags: ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen