Oft hat der Benutzer es eilig, wenn er der Site Materialien hinzufügt oder beispielsweise ein neues Thema im Forum erstellt, einen Satz (Titel) mit einem kleinen Buchstaben (Kleinbuchstaben) zu schreiben. Dies ist bis zu einem gewissen Grad ein Fehler.

Ich zeige Ihnen verschiedene Möglichkeiten zur Lösung dieses Problems: PHP und CSS eignen sich besser für bereits veröffentlichte Materialien, wenn jQuery die Situation bereits vor der Veröffentlichung beheben kann.

Der erste Buchstabe einer Zeichenfolge wird in PHP in Großbuchstaben geschrieben

In PHP gibt es eine Funktion namens „ ucfirst", Der nur das erste Zeichen der Zeichenfolge in Großbuchstaben umwandelt, aber sein Minus ist, dass es mit Cyrillic nicht ganz richtig funktioniert.

Dazu schreiben wir unsere eigene kleine Funktion. Die Implementierung sieht folgendermaßen aus:

In dieser Version erhalten wir einen Satz, der mit einem Großbuchstaben beginnt, was wir tatsächlich brauchen.

Großbuchstabe des ersten Zeichenkettenbuchstabens in CSS

Diese Methode konvertiert visuell (dh im Quellcode der Site sehen die Angebote so aus, wie sie ist) auch das erste Zeichen in Großbuchstaben.

Die Verwendung ist wie folgt:

Verwendung des Pseudoelements " erster Brief"Und Eigenschaften" texttransformation»Wir haben das Erscheinungsbild für jeden ersten Buchstaben des Absatzes festgelegt.

JQuery Großbuchstabe erster Buchstabe der Zeichenfolge

Wie ich bereits sagte, eignet sich diese Konvertierungsmethode am besten für Materialien, die noch veröffentlicht werden müssen.

Zum Beispiel nehmen wir ein Textfeld (es dient als Feld für die Eingabe eines Titels für uns) und schreiben ein kleines Skript dafür, das bei der Eingabe eines Satzes mit einem Kleinbuchstaben groß geschrieben wird:

Das Skript funktioniert sowohl beim Schreiben als auch beim Einfügen von Text. Vergessen Sie nicht, dass die jQuery-Bibliothek verbunden sein muss, damit die Skripte auf Ihrer Site funktionieren.

Steuert die Konvertierung von Elementtext in Groß- oder Kleinbuchstaben. Wenn der Wert nicht "none" ist, wird der Fall des Quelltextes geändert.

Brief Information

Bezeichnungen

Die Werte

großschreibung Das erste Zeichen jedes Wortes im Satz wird großgeschrieben. Die restlichen Symbole ändern ihr Aussehen nicht. Kleinbuchstaben Alle Textzeichen werden Kleinbuchstaben (Kleinbuchstaben). Großbuchstaben Alle Textzeichen sind Großbuchstaben (Großbuchstaben). none Ändert den Fall nicht.

Sandkasten

Winnie the Pooh war einer kleinen Erfrischung immer nicht abgeneigt, besonders um elf Uhr morgens, denn zu diesem Zeitpunkt war das Frühstück bereits vor langer Zeit zu Ende gegangen, und das Abendessen hatte nicht einmal daran gedacht, zu beginnen. Und natürlich war er schrecklich glücklich zu sehen, wie Rabbit Tassen und Teller herausnahm.

div (Texttransformation: groß schreiben;)

Beispiel

Kulturdenkmal des Mittelalters

Das Amazonas-Tiefland nimmt einen kleinen Transport von Katzen und Hunden auf, und Hayosh Bay ist berühmt für seine Rotweine.

Das Ergebnis dieses Beispiels ist in Abb. 1 dargestellt. 1.

Zahl: 1. Anwenden der Texttransformationseigenschaft

Objektmodell

Ein Objekt.style.textTransform

Spezifikation

Jede Spezifikation durchläuft mehrere Genehmigungsstufen.

• Empfehlung - Diese Spezifikation wird vom W3C gebilligt und als Standard empfohlen.
• Kandidatenempfehlung ( Mögliche Empfehlung) - Die für den Standard verantwortliche Gruppe ist überzeugt, dass er seinen Zielen entspricht, aber die Hilfe der Entwicklergemeinschaft ist erforderlich, um den Standard zu implementieren
• Vorgeschlagene Empfehlung ( Empfohlene Empfehlung) - Zu diesem Zeitpunkt wird das Dokument dem W3C-Beirat zur endgültigen Genehmigung vorgelegt.
• Arbeitsentwurf - Eine ausgereiftere Version des Entwurfs nach Diskussion und Überarbeitung zur Überprüfung durch die Community.
• Entwurf des Herausgebers ( Redaktioneller Entwurf) - eine Entwurfsversion des Standards nach Bearbeitung durch die Projekteditoren.
• Entwurf ( Entwurf einer Spezifikation) ist der erste Entwurf der Norm.

Ermöglicht das Ändern der Groß- und Kleinschreibung der Buchstaben des Textes.

Der Standardwert ist none, was keine Auswirkungen auf den Text hat. Der Fall des Textes bleibt der gleiche. Die Werte für Groß- und Kleinbuchstaben konvertieren Zeichen in Groß- bzw. Kleinbuchstaben. Wenn Sie einen Großschreibungswert angeben, werden nur die ersten Zeichen jedes Wortes großgeschrieben. Inherit erbt den Wert vom übergeordneten Element.

Beispiel

Das ist der Titel. Es hat eine Texttransformationseigenschaft, die auf Großbuchstaben gesetzt ist. Alle Zeichen werden in Großbuchstaben geschrieben.

Die Eigenschaft "Texttransformation" wurde auf diesen Absatz mit dem Wert "Kleinbuchstaben" angewendet. Dies bedeutet, dass alle Buchstaben in Kleinbuchstaben geschrieben werden.

In diesem letzten Absatz wird eine Texttransformationseigenschaft mit einer CAPITALIZE-Eigenschaft angewendet. Die ersten Buchstaben jedes Wortes werden in Großbuchstaben geschrieben, und nur das.

Ergebnis

Allerdings nicht alles so einfach. Es gibt einige Nuancen. Wenn Sie den zweiten Absatz des obigen Beispiels beachten, werden Sie feststellen, dass das Wort Großschreibung trotz der auf den Absatz mit dem Großschreibwert angewendeten Texttransformationseigenschaft vollständig in Großbuchstaben wiedergegeben wird, was dem Originaltext entspricht. Dies erklärt sich aus der Tatsache, dass mit dem angegebenen Großschreibungswert nur die ersten Buchstaben der Wörter überprüft werden und der Rest unabhängig von ihrem Ausgangszustand unverändert bleibt.
Trotz ihrer scheinbaren Einfachheit kann die Eigenschaft der Texttransformation sehr nützlich sein. Um beispielsweise den Text aller H1-Überschriften auf Ihrer Site groß zu schreiben, müssen Sie Ihrem Stylesheet lediglich eine Eigenschaft hinzufügen

H1 (Texttransformation: Großbuchstaben;)

und das Problem wird gelöst. Und es ist nicht erforderlich, alle Header manuell zu ändern, von denen es sehr, sehr viele geben kann.

CSS-Großbuchstaben helfen, die Monotonie eines einheitlichen Designs zu brechen, dessen Texte von Anfang bis Ende gleich aussehen.

Früher und jetzt fallen Kappen

Die Chronisten verwendeten Großbuchstaben in handgeschriebenen Manuskripten, von denen einige aus dem 5. Jahrhundert stammen. Vom 8. bis 15. Jahrhundert wurden weiterhin Großbuchstaben verwendet, als die Druckmaschine die Industrialisierung des Drucks ermöglichte. Sowohl handgeschriebene als auch gedruckte Abdeckkappen wurden am Anfang des Textes platziert. Sie wurden oft mit einem dekorativen Muster verziert, das um den Brief gelegt wurde.

Erhöhte und abgesenkte Buchstaben werden noch heute verwendet. Sie sind in Zeitungen, Zeitschriften und Büchern sowie im Digitaldruck zu finden. Erhöhte Buchstaben werden manchmal als erweitert bezeichnet. Sie werden bündig mit dem unteren Rand des darauf folgenden Textes platziert. Ausgelassene Buchstaben werden bündig mit dem oberen Rand des Textes platziert, manchmal in einer Ebene hinter dem Hauptteil des Textinhalts, oder der Rest des Textes fließt um sie herum.

Erhöhte Buchstaben sind viel einfacher zu definieren, da sie mit dem Rest des Textes bündig sind und Sie normalerweise den Fluss um die äußeren Ränder nicht ändern müssen, um dies zu tun. Ausgelassene Buchstaben erfordern eine genauere Abstimmung. Es wird für Sie einfacher sein, dies zu klären, wenn Sie zuerst verstehen, wie erhabene Zeichen behandelt werden.

Klassen verwenden

Designer, die bereits mit CSS vertraut sind, können eine separate CSS-Klasse für den ersten Großbuchstaben erstellen.

Das CSS für das Absatzelement und die Klasse, die den Buchstaben erstellt, sieht folgendermaßen aus:

p (Schriftgröße: 20px; Schriftfamilie: Georgia, "Times New Roman", Times, Serif;) .myinitialcaps (Schriftgröße: 48px; Schriftfamilie: Didot;)

Und der HTML-Code sieht folgendermaßen aus:

Was uns gibt:

Scheint zu einfach? In der Tat müssen Sie Anpassungen basierend auf den spezifischen erhabenen Buchstaben vornehmen, da jeder Großbuchstabe ein spezielles Kerning erfordert. Nachdem Sie eine Schriftart für die erhabenen Buchstaben und den Text ausgewählt haben, müssen Sie für jeden erhabenen Buchstaben separate Klassen erstellen. Im Folgenden CSS class.myinitialcapsi Das Feld rechts ist negativ, um den Abstand zwischen I und n zu verringern.

Myinitialcapsi (Schriftgröße: 48px; Schriftfamilie: Didot; Rand rechts: -1px;)

ichin diesem Fall gibt es einen zusätzlichen Abstand zwischen dem "Ich" und dem "n".

ichdas Einschließen einer neuen Klasse mit einem negativen Spielraum zieht sie näher.

Abhängig von der Bildschirmauflösung im obigen Beispiel sehen I und n möglicherweise so aus, als wären sie zusammengeführt worden. Dies liegt an den Serifen am Ende der Buchstaben. Bevor Sie sich für die endgültigen CSS-Stile entscheiden, testen Sie die Site auf verschiedenen Geräten, um festzustellen, wie der Text in Großbuchstaben CSS auf ihnen aussieht.

Zitate und andere Sonderfälle

Sie können nicht nur die Buchstaben am Textanfang vergrößern. Sie können eine andere Klasse implementieren, um eine größere Version der Anführungszeichen zu erstellen, die neben dem Buchstaben angezeigt werden. In unserem Fall ist weder die 48-Pixel-Klasse noch die 20-Pixel-Textklasse für Anführungszeichen geeignet. Vielmehr wird es etwas zwischen - 30 Pixel sein. Wir verschieben die Anführungszeichen um 4 Pixel nach unten, um sie optisch an I auszurichten:

Myinitialcapsq (Schriftgröße: 30px; Schriftfamilie: Didot; float: left; Rand oben: 4px;)

“icheinschließlich einer neuen Klasse mit einem negativen Spielraum wird sie näher gezogen.

Sie müssen sehr vorsichtig sein, wenn Sie die einzelnen CSS-Kappen zusammen mit den Anführungszeichen angeben, damit deren Kerning und Ausrichtung mit dem umgebenden Markup übereinstimmen. Beispielsweise muss der Buchstabe T etwas über den Rand des Absatzes hinaus nach links verschoben werden, damit seine Querlinie optisch in das Layout passt. Sie müssen dasselbe mit runden Buchstaben wie C, G, O und Q tun. In diesem Beispiel werden Schriftgrößen von 20, 30 und 48 verwendet. Sie müssen die Größen jedoch anhand der Besonderheiten der von Ihnen ausgewählten Schriftarten auswählen. Sowie die Größen und Auflösungen der Bildschirme, auf denen die Site angezeigt wird.

Pseudoelemente und Pseudoklassen

Mit einem CSS-Pseudoelement können Sie einfach einen erhabenen Buchstaben erstellen, indem Sie dem Absatzelement :: first-letter hinzufügen. Verwendung: Anfangsbuchstabe ( mit einem Doppelpunkt) für veraltete Browser:

p (Schriftgröße: 1.2em; Schriftfamilie: Georgia, "Times New Roman", Times, Serife; Zeilenhöhe: 2em; Polsterung unten: 1.2em;) p :: Anfangsbuchstabe (Schriftgröße: 3.6em; Texttransformation: Großbuchstaben; Schriftfamilie: "Monotype Bernard Condensed", Serife; Rand rechts: 0.03em;) .initialb (Rand rechts: -0.1em;) .initialn (Rand rechts: -0.15 em;)

Der HTML-Code, der CSS-Klassen enthält, die das Kerning der Buchstaben N und B berücksichtigen, sieht folgendermaßen aus ...

Ein Anfangsbuchstabe, wobei der erste Buchstabe ein Großbuchstabe ist.
Bei einem Zeilenumbruch hat die nächste Zeile keine anfängliche Obergrenze.

nbeachten Sie in der HTML-Quelle, wie der erste Buchstabe, kein Großbuchstabe im HTML, auf die anfängliche Großbuchstabengröße von 3,6 em angepasst wird. Ordentlich, was?

B.bei einer harten Rückkehr und einem neuen Absatz wird immer eine neue Anfangsobergrenze erstellt. Sie könnten sich fragen, Wie werde ich das erklären? Soll ich am Anfang eines sehr neuen Absatzes eine anfängliche Obergrenze haben? Nun, du könntest. Aber möchten Sie, dass es so aussieht, und muss es unbedingt so aussehen?

Der erste Großbuchstabe des Absatzes wird in einen Buchstaben umgewandelt.
Der erste Buchstabe nach einem Zeilenumbruch wird nicht großgeschrieben.

ÜberBeachten Sie, dass in der HTML-Quelle der erste Buchstabe nicht groß geschrieben, sondern in ein 3.6em-Zeichen konvertiert wird.

ÜBERSelbst nach einem erzwungenen Zeilenumbruch und am Anfang jedes neuen Absatzes wird jedoch immer ein Buchstabe erstellt. Sie könnten sich fragen: Wie rechne ich das ab? Muss ich für all diese Fälle Buchstaben hinzufügen? Ja, du kannst. Aber ist es notwendig?

Trotz der Vorteile, die Pseudoelemente bieten, mussten wir viel Code hinzufügen, um separate Klassen zu definieren, die Kerning- und Einrückungsprobleme behandeln. Diese Methode konvertiert jedoch den ersten Buchstaben jedes neuen Absatzes in einen Großbuchstaben in CSS. Bei einigen funktioniert dies möglicherweise nicht, da Sie nicht den ersten Buchstaben jedes Absatzes konvertieren müssen.

Kombinieren Sie Pseudoklassen und Pseudoelemente, um ein intelligentes Layout zu erstellen

Das Hinzufügen der Pseudoklasse: first-child hilft, das Problem der unnötigen Konvertierung von Anfangsbuchstaben zu lösen:

p (Schriftgröße: 1.2em; Schriftfamilie: Georgia, "Times New Roman", Times, Serife; Zeilenhöhe: 2em; Polsterung unten: 0.5em;) p: erstes Kind :: erster Buchstabe ( Schriftgröße: 3.6em; Texttransformation: Großbuchstaben; Schriftfamilie: "Monotype Bernard Condensed", Serife; Rand rechts: 0.03em;)

Kombinieren dieses Codes mit HTML:

Der erste Buchstabe, der als erstes Kind definiert ist, ist der einzige Buchstabe, der bei dieser Methode in die erhöhte Drop-Cap konvertiert wird.

Da nur der als erstes Kind definierte Buchstabe konvertiert wird, beachten Sie, dass sich dieses Beispiel vom vorherigen ohne erstes Kind unterscheidet. Außerdem konvertieren wir die ersten Buchstaben nicht nach dem Beginn eines Absatzes und nach einem erzwungenen Zeilenumbruch. Dies sieht eleganter aus als das Layout, als wir alle Anfangsbuchstaben der Absätze konvertiert haben.

Der Vorteil der Verwendung von Pseudoklassen ist die Fähigkeit, verschiedene Sonderfälle zu behandeln. Was ist mit den Nachteilen? Es gibt viele verschiedene Pseudoklassen, und sie können auf so viele Arten kombiniert werden, dass sich Ihr Kopf dreht. Zum Beispiel können die Pseudoklassen: first-child und: first-of-type die gleichen Ergebnisse liefern. Sie können die Pseudoklasse auch nicht nur auf einen Absatz, sondern auch auf Elemente anwenden