CodeBlog.ch » Uncategorized http://www.codeblog.ch Coding and more - Concrete5, Flex, JavaScript Mon, 05 Dec 2011 16:10:29 +0000 de hourly 1 http://wordpress.org/?v=3.2.1 Vorschau Text mit PHP http://www.codeblog.ch/de/2009/06/smart-text-trimming-with-php/ http://www.codeblog.ch/de/2009/06/smart-text-trimming-with-php/#comments Sat, 20 Jun 2009 12:56:46 +0000 Remo Laubacher http://www.codeblog.ch/?p=353 Möchte man einen kurzen Vorschautext in PHP erstellen, der einen Anriss des effektiven Textes zeigt, so wird man wohl oft die einfachste Variante gewählt haben, und einfach nach einer Anzahl definierten Zeichen abgeschnitten haben. Dies generiert jedoch ein unschönes Ergebnis, wenn man eine proportionale Schrift verwendet. Sämtliche Text haben markant unterschiedliche Längen wie auf diesem Bild gezeigt wird:

text-trimming

Dieser Artikel zeigt einen einfachen Ansatz, diese Problematik etwas eleganter zu lösen!

Textlänge messen

PHP bietet verschiedene Methoden um die Länge eines Textes zu messen. Zum Beispiel die Methode ImageFontWidth welche die Länge der PHP internen Schriften einfach und gut messen kann. Möchte man ein einfaches Captcha erstellen, das die internen Schriften verwendet, ist diese Methode sicherlich eine gute Wahl.

Allerdings gibt’s noch eine andere Methode, welche die komplette “Bounding Box” errechnet. Sie lautet imagettfbbox. Der Rückgabe-Wert ist eine Array welches sämtliche Werte für die “Bounding Box” enthält.

Die Methode

Wie zu Beginn des Artikels gezeigt, wollte ich eine Methode die den Text kürzt und am Ende einen weiteren Text (in diesem Fall “…”) anhängt um zu zeigen, dass der Text nicht vollständig ist.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function trim_by_width($text,$width,$font_file,$font_size=7,$append_string = '...')
{
	$append_string_box = imagettfbbox($font_size,0,$font_file,$append_string);
	$append_string_width = $append_string_box[2];
 
	$str_len = strlen($text);
	for ($i = 0; $i<=$str_len; $i++)
	{
		$trimmed_text = substr($text,0,$i);
		$bounding_box = imagettfbbox($font_size,0,$font_file,$trimmed_text);
		$trimmed_text_width = $bounding_box[2];
		if ($trimmed_text_width + $append_string_width > $width && $i > 0)
		{
			$str_to_return = substr($trimmed_text,0,strlen($trimmed_text)-1);
			if ($trimmed_text_width != $str_len)
			{
				$str_to_return .= $append_string;
			}
			return $str_to_return;
		}
	}
	return $text;
}
$trimmed_text = trim_by_width($text, $width, $font_file, $font_size, $append_string='...');

$text:
Der Text der zu kürzen

$width:
Die maximale Länge des Textes in Pixel!

$font_file:
Die True Type Schriftendatei

$font_size:
Die Schriftgrösse. Bitte beachten Sie, dass die Einheiten je nach GD Version anders sind. GD1 verwendet Pixel, GD2 hingegen Punkte./code>

$append_string:
Ein optionaler String welcher bei gekürzten Texten angehängt wird. Standardmässig "..."

Beispiel

Sie können die Methode nach folgendem Schema aufrufen:

echo trim_by_width('this is a long text',55,dirname(__FILE__) . '/verdana.ttf',8);

Das Script geht davon aus, dass sich die Datei verdana.ttf im gleichen Verzeichnis wie das PHP Script befindet. Anschliessend wird der Text nach 55 Pixel gekürzt und ausgegeben.

Fertig!

]]> http://www.codeblog.ch/de/2009/06/smart-text-trimming-with-php/feed/ 1 Schriften im Internet – Cufón http://www.codeblog.ch/de/2009/04/schriften-im-internet-cufon/ http://www.codeblog.ch/de/2009/04/schriften-im-internet-cufon/#comments Wed, 01 Apr 2009 08:43:55 +0000 Remo Laubacher http://www.codeblog.ch/?p=264 Schriften im Internet

Schriften unter Internetseiten ist seit langem ein beliebtes Thema. Grafiker wollen logischerweise völlige Freiheiten, der Programmierer eine solide Lösung die keine Probleme verursacht. Oft interessiert es den Leser nicht in welcher Schrift etwas dargestellt wird, solange der Inhalt lesbar ist. Bei kleinen Seiten mit wenig Inhalt spielen Schriften jedoch schnell eine grössere Rolle.

Wie kann man sowas umsetzen:

font

Eigene Schriften im Internet

Mit EOT, sIFR und anderen Ansätzen gibt es schon länger Lösungen. Unschöne Darstellungen wenn die Seite noch nicht gelanden ist, fehlende Unterstützung von Seiten der Browser haben jedoch die meisten Lösungen eher unbrauchbar gemacht.

Mit Cufón gibt’s jedoch eine neue Lösung die sehr vielversprechend aussieht!

  • Keine Plugins erforderlich
  • Unterstützung von zahlreichen Browsern
  • Einfach einzusetzen
  • Schnell

Die Schriften werden im JavaScript Format abgespeichert. Damit man allerdings ein JavaScript File verwenden kann, muss es zuerst erstellt werden. Dazu kann ein simples Webinterface verwendet werden:

http://cufon.shoqolate.com/generate/

Im Hintergrund werden einige Aktionen ausgeführt. Die Linux Applikation FontForge wird verwendet um eine SVG Schrift zu erstellen. Aus der SVG Datei werden VML Pfade generiert und daraus wird ein JSON String erstellt. Klingt umständlich, ist es auch, aber glücklicherweise müssen wir uns um fast nichts kümmern!

Wir wählen als unsere Schrift aus und erhalten eine JavaScript Datei als Download wenn wir das Formular abschicken.

JavaScript Schrift einbinden

Wir benötigen als erstes das Cufon Script. Komprimiert oder auch unkomprimiert.

Als Ausgangslage haben wir eine simple HTML Datei:

1
2
3
4
5
6
7
8
9
10
11

<html>
<head>
</head>
<body>
<h1>Etiam vel odio</h1>
Proin tristique elit eget nisl. Donec dictum mauris a sem. Pellentesque at arcu. Mauris cursus erat at magna adipiscing commodo. Integer ornare. Sed sollicitudin, est imperdiet hendrerit bibendum, erat turpis venenatis mauris, non ullamcorper quam arcu sit amet lacus. Nullam ut eros. Vivamus luctus urna rhoncus sem. Duis vel nibh.
<h2>Praesent lobortis</h2>
Mauris ornare tincidunt arcu. Mauris pretium. Vestibulum ac metus in erat condimentum accumsan. Aenean dignissim consectetur risus. Maecenas purus. Duis eget mauris. Duis venenatis. Fusce tortor nunc, adipiscing id, gravida vel, ullamcorper ac, metus. Pellentesque suscipit. Suspendisse mollis augue eu mauris. Nulla facilisi. 
 
</body>
</html>

Wir wollen nun, dass H1 und H2 in unserer neu erstellten JavaScript Schrift dargestellt werden. Dazu kopieren wir die beiden JavaScripts in dasselbe Verzeichnis und ergänzen unsere HTML Datei so, dass wir folgendes Ergebnis erhalten:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
	<script src="cufon-yui.js" type="text/javascript"></script>
	<script src="Remo_Laubacher_400.font.js" type="text/javascript"></script>
	<script type="text/javascript">
		Cufon.replace('h1')('h2');
	</script>
</head>
<body>
<h1>Etiam vel odio</h1>
Proin tristique elit eget nisl. Donec dictum mauris a sem. Pellentesque at arcu. Mauris cursus erat at magna adipiscing commodo. Integer ornare. Sed sollicitudin, est imperdiet hendrerit bibendum, erat turpis venenatis mauris, non ullamcorper quam arcu sit amet lacus. Nullam ut eros. Vivamus luctus urna rhoncus sem. Duis vel nibh.
<h2>Praesent lobortis</h2>
Mauris ornare tincidunt arcu. Mauris pretium. Vestibulum ac metus in erat condimentum accumsan. Aenean dignissim consectetur risus. Maecenas purus. Duis eget mauris. Duis venenatis. Fusce tortor nunc, adipiscing id, gravida vel, ullamcorper ac, metus. Pellentesque suscipit. Suspendisse mollis augue eu mauris. Nulla facilisi. 
 
<script type="text/javascript">Cufon.now();</script>
</body>
</html>

Im Kopf die beiden JavaScripts einbinden, mit Cufon.replace die HTML Tags ersetzen und am Ende, vor dem Tag Cufon.now() aufrufen um ein Darstellungsprobleme von Internet-Explorer zu beheben – fertig!

Sämtliche Files zum Download. Viel Spass!

]]> http://www.codeblog.ch/de/2009/04/schriften-im-internet-cufon/feed/ 2 Mac OS X – Maus Beschleunigung http://www.codeblog.ch/de/2008/11/mac-os-x-maus-beschleunigung/ http://www.codeblog.ch/de/2008/11/mac-os-x-maus-beschleunigung/#comments Tue, 11 Nov 2008 09:01:02 +0000 Remo Laubacher http://www.codeblog.ch/?p=114 Zugegeben etwas ungewöhnlich und vermutlich kein grosses Problem für die meisten Leute. Bei der Mausbeschleunigung geht es darum, dass man für einen Monitor der 50cm breit ist, die Maus nicht 50cm weit bewegen muss. Dabei muss es trotzdem möglich sein, kleine Distanzen präzise zurückzulegen. Das führt dazu, das sich der Mauszeiger in einer nicht linearen Form gegenüber der Mausbewegung verschiebt.

Was hat das mit Mac OS X zu tun? Ich selbst besitze zwei Computer von Apple, ein Mac Mini und ein Macbook Pro mit einem Intel Prozessor.

So lächerlich das klingt – der Hauptgrund, wieso ich auf meinem Macbook kaum mit OS X arbeite ist, dass ich mit der Maus nicht umgehen kann. Es passt mir regelmässig, dass ich die Icons verfehle!

Hier gibt es jedoch Abhilfe – ein gratis Tool mit dem Namen “MouseFix”. MouseFix Seite

Das beste OS X Tool das ich je gefunden habe!
;-)

]]> http://www.codeblog.ch/de/2008/11/mac-os-x-maus-beschleunigung/feed/ 0 Schriften vektorisieren http://www.codeblog.ch/de/2008/07/schriften-vektorisieren/ http://www.codeblog.ch/de/2008/07/schriften-vektorisieren/#comments Mon, 28 Jul 2008 11:01:32 +0000 Remo Laubacher http://www.codeblog.ch/?p=38 Es gab noch Zeiten, da wollen Leute ihren Text vektorierisieren um mehr Freiheiten zu haben. Inzwischen gibt es Leute die finden noch ganz andere unnötige Gründe wieso man einen Text in einen “Pfad” umwandeln möchte. Sei es weil man zum Beispiel mit PHP einen Text ausgeben möchte, ohne FreeType (zusammen mit GD) zu verwenden. Eine Situation die wohl fast nie vorkommt, trotzdem ein kurzer Artikel zu diesem (eher spielerischen) Thema.

Als erstes müssen wir die gewünschte Schriftart in eine ganze Reihe von Koordinaten umwandeln. Viele Grafikprogramme können dies, wir wollen aber wissen wie man das selber programmieren kann. Hat in unserem Fall auch den Vorteil, dass wir die Ausgabe so gestalten können wie wir wollen.

Vektorisieren

Microsoft bietet für genau diese Aufgabe mit ihrem .Net Framework eine genial einfache Lösung an.  Im Namespace System.Drawing.Drawing2D befindet sich eine Klasse GraphicsPath die ideal ist um Dinge zu vektorisieren.

using System.Drawing.Drawing2D;
...
GraphicsPath path = new GraphicsPath();
path.AddString("Hello World!", FontFamily, FontSize...);

Dadurch hat man bereits alles in GraphicsPath gezeichnet was wir benötigen. Das auslesen der einzelnen Punkte ist genau so einfach:

foreach (PointF p in path.PathPoints)
{
   // Punkte verarbeiten
}

Am Ende dieses Artikels befindet sich eine kleine Applikation die mit Visual Studio 2008 Express geschrieben wurde. Sie generiert ist ohne Abhängigkeiten lauffähig.

Ausgabe

Wie anfänglich erwähnt, wollte ich diese Punkte mittels PHP GD Library ausgeben.

<?php
// Generierter PHP Code für die Schriftart. Bei den Zeichen ' und \ befindet sich ein kleiner Fehler weil ich keine Escape Sequenzen eingebaut habe!
 
// call by reference for $font is not possible because we have to modify the array
function drawLetter(&$im, $font,$letter,$offsetLeft,$offsetTop,$scale=1)
{
   $line_color = imagecolorallocate($im, 66, 14, 91);
 
   foreach ($font[$letter] as $key=>$value)
   {
      $font[$letter][$key] *= $scale;
 
      if ($key % 2 == 0)
      {
         $font[$letter][$key] += $offsetLeft;
      }
      else
      {
         $font[$letter][$key] += $offsetTop;
      }
   }
   imagepolygon($im, $font[$letter], count($font[$letter])/2, $line_color);
}
 
 
header("Content-type: image/png");
$im = @imagecreate(500, 500) or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 255, 255, 255);
 
// Hier beachten, dass man die korrekte Schriftart (analog PHP Schrift) verwendet!
drawLetter($im,$font['Mistral'],'H',10,10,8);
drawLetter($im,$font['Mistral'],'u',80,10,8);
drawLetter($im,$font['Mistral'],'i',145,10,8);
 
imagepng($im);
imagedestroy($im);
?>

Und schon hat man eine TrueType Schriftart ohne FreeType mit PHP ausgegeben. Allerdings mit einigen Einschränkungen:

Problematische Dinge

Es ist wohl nicht besonders klug diese Art und Weise von Ausgabe oft zu verwenden. Hier ein paar Punkte die momentan buggy sind und die Einsatzfähigkeit einschränken:

  • Buchstaben die nicht zusammenhängend sind (z.B.: “i”) werden nicht korrekt dargestellt, da eine Verbindung vom Strich zum Punkt gezeichnet wird
  • Der generierte PHP Code enthält zwei Fehler wenn die Zeichen ‘ und \ ausgegeben werden. Findet ihr aber sicherlich selber ;-)
  • Skalieren ist nur bedingt möglich da wir nur “Geraden” zeichnen und keine Kurven
  • Die Daten werden momentan in Form von PHP Code ausgebeben. Ein binäres Format wäre sicherlich viel Effizienter was die Dateigrösse angeht.

VS 2008 Express Quellcode

]]> http://www.codeblog.ch/de/2008/07/schriften-vektorisieren/feed/ 0 Icons http://www.codeblog.ch/de/2008/07/icons/ http://www.codeblog.ch/de/2008/07/icons/#comments Thu, 24 Jul 2008 09:30:59 +0000 Remo Laubacher http://www.codeblog.ch/?p=37 Egal ob Webdesigner oder Softwareentwickler – Icons braucht man bei fast jedem Projekt. Dankbarerweise gibt es zahlreiche Grafiker, die ihre Kunstwerke zur freien Verfügung ins Internet gestellt haben. Hier eine Liste von Seiten die wir im codeforum.ch gesammelt haben (http://codeforum.ch/index.php/topic,3503.0.html)

]]> http://www.codeblog.ch/de/2008/07/icons/feed/ 0 codeblog.ch eröffnet http://www.codeblog.ch/de/2008/04/codeblogch-eroffnet/ http://www.codeblog.ch/de/2008/04/codeblogch-eroffnet/#comments Wed, 02 Apr 2008 19:15:21 +0000 Remo Laubacher http://www.codeblog.ch/?p=4 Als Spin-Off zu codeforum.ch, ein Forum indem ich öfters anzutreffen bin, gibt es nun codeblog.ch. Momentan noch leer und erst seit ein paar Minuten online, noch nicht besonders spannend.

Ich hoffe aber, dass mit der Zeit verschiedene Personen Artikel hier publizieren werden. Ein kleiner Wunsch wäre noch immer die Integration in codeforum.ch so dass man nur eine Seite besuchen muss um zu sehen was es denn neues auf code*.ch gibt!

]]> http://www.codeblog.ch/de/2008/04/codeblogch-eroffnet/feed/ 1