Wie ordne ich eine Initiale in html/css korrekt an?

Question

Nun, ich habe das folgende Problem: Ich brauche eine dynamische Lösung (nicht wissen, den Text, resultierende Schriftgröße etc.) typografisch korrekt eine Drop-Cap ausrichten. Richtig bedeutet: Die Kappenhöhe der Kappe sollte der Kappenhöhe des Absatzes entsprechen.

Eg: Z Z Z sollten alle in ihre obere horizontale Stange auszurichten. Während ich einige (falsche) Lösungen für dieses Problem gesehen habe (sie richten die Gesamthöhe aus und sehen daher schrecklich aus mit Akzenten, Därese etc.), habe ich keine richtige Lösung gesehen.

Hat einige jemand wissen?

PS: Es könnte funktionieren, wenn ich einen Weg finden würde, um die Basislinie des Dropcap mit der Basislinie der zweiten Zeile des Absatzes konsistent auszurichten, denn von dort könnte es mit einem% -Modifikator der gemacht werden Schriftgröße. Leider weiß ich auch nicht, wie ich das archivieren könnte.

ist hier etwas zu spielen mit:

p.cap { 
    text-indent: 0; 
    font-size: 125%; 
    line-height: 125%; 
    text-align: justify; 
} 

p.cap:first-letter { 
    display: inline-block; 
    float: left; 
    font-size: 230%; 
} 

http://jsfiddle.net/s856R/

Answer 1

Ihre aktualisierte Geige Siehe:

jsFiddle

starten:

p.cap { 
    text-indent:0; font-size:125%; line-height:125%; 
    text-align:justify; 
} 

p.cap:first-letter { 
    display:inline-block; float:left; font-size:280%;margin-top:15px 
} 

Answer 2

p.cap_push_it_down:first-letter { 
    display:inline-block; 
    float:left; font-size:230%; 
    padding-top:14px; //note this 

}

ich denke, sollten Sie einige der verschiedenen Klassennamen den Absätzen mit Buchstaben wie Ž Start geben und ihre Stile angeben wie oben im Code gezeigt ...

auch, können Sie erarbeiten ein bisschen mehr diese "falschen Lösungen" ??

Answer 3

Try this - definieren eine Schriftart Hexe SUTs Ihre Anforderungen ...

body 
{font-family: "times"}; 
p.cap { 
    text-indent:0; font-size:125%; line-height:125%; 
    text-align:justify; 
} 

p.cap:first-letter { 
    display:inline-block; float:left; font-size:280%;margin-top:-6px 

Answer 4

Getestet habe ich den folgenden Code in Chrome, IE10 und Firefox auf Windows 7:

p.cap { 
    line-height: 1.4em; 
} 

p.cap:first-letter { 
    font-size: 2.8em; 
    float: left; 
    margin-top: 0.25em; 
} 

(Beachten Sie, dass ich benutze em anstelle von Prozent hier und dass die Größe der drop cap ist doppelt so groß wie die Absatzlinie-Höhe.)

Es scheint, dass die cul Prit ist float in Firefox. Es zeigt schön in Chrome und Internet Explorer, aber in Firefox mit float auf das erste Zeichen scheint es von der Grundlinie des Rests der Linie zu trennen. Ich kann float: left; löschen und vertical-align: -100%; hinzufügen, um die Grundlinie in allen Browsern zu finden, aber dann wird die Zeilenhöhe durcheinander gebracht und die Drop-Cap wird nicht schweben, so dass es keine Lösung ist.

Die einzige Lösung scheint zu sein, eine Spanne um den ersten Buchstaben zu legen und stattdessen zu verwenden. Wie so:

<p class="cap"><span class="dropcap">Ž</span>ed Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha slkgh ka KFhl skh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p> 
<p class="cap"><span class="dropcap">Z</span>as Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha slkgh ka KFhl sh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p> 

und:

p.cap .dropcap { 
    float: left; 
    font-size: 2.8em; 
    margin-top: 0.25em; 
} 

Dies scheint auch die Basislinie und zeigt schön in Firefox zu halten, aber diese Tags dynamisch schreiben wird natürlich PHP oder JavaScript oder ähnliches erforderlich. Wenn das keine Option ist, werden Sie wahrscheinlich keine guten Ergebnisse in Firefox erzielen können. Unglücklicherweise.

Answer 5

Mit ein wenig Hilfe von jquery (danke foxybagga) habe ich es irgendwie geschafft.

Diese

$("#container p").each(function() { 
    var text = $(this).html(); 
    var first = $('<span>' + text.charAt(0) + '</span>').addClass('caps'); 
    $(this).html(text.substring(1)).prepend(first); 
}); 

wickelt die ersten Buchstaben mit einem < span class = "caps" >-Tag. Die Klasse hat nur ein paar Zeilen mehr als Ihre p.cap: First-Letter-Klasse, aber macht den Job.

.caps { 
    display:inline-block; 
    float:left; 
    font-size:230%; 
    line-height:100%; 
    margin-top:-2px; 
    padding-right:2px; 
} 

Bitte beachten Sie: diese CSS-Regeln mit Ihrem p.cap mit: first-letter-Klasse nicht das gleiche Ergebnis nicht geben.

jsfiddle

Answer 6

Hier ist ein Weg, um das Ergebnis: http://jsfiddle.net/picbig/s856R/38/

p.cap { 
    text-indent:0; font-size:125%; line-height:125%; 
    text-align:justify; 
} 

p.cap:first-letter { 
    float: left; font-size:230%; 

} 

p.cap:first-child:first-letter{ 
    margin-top: -5px; 
} 
p.cap:last-child:first-letter{ 
    margin-top: 2px; 
} 

A: jedes p Targeting: first-letter indivually mit Doppel pseudo: first-child: first-letter { } und Ränder auf ihnen setzen

B: Keine Notwendigkeit für Anzeige: Inline-Block auf p.cap: erster Buchstabe

Answer 7

Die beste Antwort darauf ist, dass - abhängig von der Schriftart-Familie, Schriftgröße und Zeilenhöhe, die Sie am Ende verwenden - es erfordert einige Fummelei mit negativen Margen (Keuchen), um nur richtig zu bekommen. Das heißt, ich habe es in dieser Geige ziemlich gut aussehende:

http://jsfiddle.net/rafegoldberg/zohs9tna/5/ 

Der Trick ist, Ihre line-height zurückgesetzt, so dass es die Größe des dropcap Schriftart übereinstimmt, im Gegensatz zu dem line-height vererben davon enthält Absatz. So wie dies etwas zu tun, wird eine konsequente Ausrichtung oben zu erreichen:

p:first-letter { 
    font-size: 230%; 
    float: left; 
    line-height: 1; 
    display: inline-block; 
} 

This will result in something like this. (Sorry für den Link zu einem Bild, ich habe nicht genug rep habe, um Bilder zu posten.!) Aber es ist immer noch unvollkommen, da es so ausgerichtet zu den Extendern der ersten Zeile und nicht zum Text-Top. Um dies zu beheben, müssen Sie den oberen Rand der Dropcaps anpassen - spielen Sie mit ihm herum, bis Sie die Dropcap-Taste gedrückt haben, um den Text oben und nicht den Extender auszurichten. (Ich habe outline und outine-offset verwendet, um meine Arbeit zu überprüfen.)

Dies wird wahrscheinlich dazu führen, dass die nächste Textzeile herunterfallen. Wenn das passiert, spielen Sie einfach mit einem leichten negativen Rand am unteren Rand der Dropcap. Das sollte die Leitung wieder hochziehen, und Sie werden gut gehen!Ihre CSS aussehen würde, genau wie oben, aber mit dieser zusätzlichen Zeile:

p:first-letter { 
    /* previous CSS... */ 
    margin: .1em .25em -.5em; 
} 

With that addition things should now look like this. (PS: Ich habe einige Ränder auf der linken und rechten Seite des dropcap hinzugefügt, wie ich glaube, Sie bekommen eine viel bessere suchen Ergebnis!)

Noch einmal, das ist etwas, das etwas herumspielen muss. Aber sobald Sie es mit Ihren spezifischen Schrifteigenschaften (Familie, Größe, Zeilenhöhe, etc.) arbeiten, sollte es konsequent funktionieren! Ich hoffe, das hilft; Prost.

Answer 8

Geben Sie die ersten Buchstaben eine Zeilenhöhe von 100% für mich funktioniert, unabhängig von der Schriftgröße von entweder dem normalen Text oder der Drop Kappe:

p.cap { 
    text-indent:0; font-size:125%; line-height:125%; 
    text-align:justify; 
} 

p.cap:first-letter { 
    position: relative; float:left; font-size:200%; line-height: 100%; 
} 

Aktualisiert Geige: http://jsfiddle.net/g11v61sc/

Answer 9

Concistant Dropcap in allen Browsern und auch auf iOS getestet. Gelöstes Problem: Die Dropcap in Firefox: erster Buchstabe als float links wird die Zeilenhöhe verlieren und macht den Buchstaben sup-styled. Sie können diesen von vermeiden:

1. hinzufügen padding-top und padding-bottom mit einem gleichen festen Wert.
2. Schriftgröße Set
3. Einstellen der Zeilenhöhe als padding-Oberseite und Unterseite padding-Wert Schriftgröße Wert minus
4. Opt die margin-top mit negativen Adjust (oder positiven) Wert
5. Opt Adjust der untere Textumbruch mit negativem Rand-Tief-Wert.

Dieses Beispiel macht ein perfektes "Typographic dropcap" mit dem Arial basefont, als Absatz 12px und mit 16px line-height. Der ganze Textblock hat einen 10px Rand-Top in meinem Test.

Verwenden Sie das Zeichen "V" als Dropcap, gefolgt von einem "i" -Zeichen. Der "i-Punkt" sollte der korrekten topographischen Ausrichtung entsprechen. (Natürlich nicht in allen Geräten/Schriftfamilien, aber ein guter Bezugspunkt).

/* Dropcap */ 

p.dropcap:first-letter { 
padding-top: 5px; 
padding-bottom: 5px; 
margin-top: -1px; 
margin-right: 7px; 
margin-bottom: -3px; 
line-height: 24px; 
float: left; 
color: #777667; 
font-family: Arial, Georgia, open sans; 
font-size: 34px; 
font-weight: 600; 
text-transform: uppercase; 
} 

Hoffe das hilft in Ihrem Stylesheet-Kontexte.