nicht angemeldet
Hallo,
Die Initial-Breite eines Feldes in der Anschließenden HTML-Tabelle soll sich aus dem Wert [Len] ergeben. Wie muss ich die den Wert für width errechnen? Ich habe im Moment einfach mit 8 multipliziert. Hängt natürlich vom Zeichensatz ab. Wie bekomme ich denn die mittlere Laufweite eines Zeichens heraus?
In einer Proportionalschrift mit Standardlaufweite benötigen die breitesten Zeichen ca. 3/4 des Schriftgrades als Breite. Bei serif-Schriften ist das etwas weniger (29/40), bei sans-serif-Schriften etwas mehr (31/40). Willst Du also auf Nummer Sicher gehen, solltest Du die Anzeigebreite berechnen: anzZeichen*Schriftgrad*3/4. Dann ist soviel Platz, dass z.B. anzZeichen Mal ein O hineinpasst.
Natürlich ist das meistens zu breit. Die schmalsten Zeichen beanspruchen ca. 1/5 des Schriftgrades. Nimmt man an, dass sich in einer Textzeile schmale und breite Zeichen die Waage halten, könnte man rechnen: (3/4 + 1/5)/2 = 19/40. Dann wäre die Anzeigebreite = anzZeichen*Schriftgrad*19/40. Das ist natürlich kritisch, weil durchaus ein Übergewicht breiter Zeichen in einer Zeile vorkommen kann.
Mir ist dazu aufgefallen, dass in den meisten Zeichnsätzen, egal ob proportional oder diktengleich, die Laufweite aller Ziffern identisch ist. Könnt Ihr das bestätigen?
Ja.
Ich habe da mal etwas gebastelt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Font-Width</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
div {font-family:sans-serif;}
/*div {font-family:serif;}
-->
</style>
</head>
<body>
<div style="position:absolute; top:0; left:0;">
<div style="position:absolute; top:10px; left:10px; background-color:#C6C3C6; font-size:400px;">O</div>
<div style="position:absolute; top:10px; left:10px; background-color:#00FF00; font-size:400px;">a</div>
<div style="position:absolute; top:10px; left:10px; background-color:#FF0000; font-size:400px;"> </div>
<div style="position:absolute; top:10px; left:10px; background-color:#FFFF00; font-size:400px;">l</div>
<div style="border-top:1px solid black; position:absolute; top:10px; left:10px; width:400px;"> </div>
<script type="text/javascript">
<!--
for (var i = 10; i<=410; i+=10) {
document.write("<div style='border-left:1px solid black; position:absolute; height:400px; top:10px; left:" + i + "px;'>" + ((i/100==parseInt(i/100,10))?i/100:' ') + "</div>");
}
//-->
</script>
</div>
<div style="position:absolute; top:0; left:410px;;">
<div style="position:absolute; top:10px; left:10px; background-color:#C6C3C6; font-size:400px;">08</div>
<div style="position:absolute; top:10px; left:10px; background-color:#00FF00; font-size:400px;">1</div>
<div style="border-top:1px solid black; position:absolute; top:10px; left:10px; width:400px;"> </div>
<script type="text/javascript">
<!--
for (var i = 10; i<=410; i+=10) {
document.write("<div style='border-left:1px solid black; position:absolute; height:400px; top:10px; left:" + i + "px;'>" + ((i/100==parseInt(i/100,10))?i/100:' ') + "</div>");
}
//-->
</script>
</div>
</body>
</html>
viele Grüße
Axel