Çoğu zaman, siteye materyal eklerken veya örneğin forumda yeni bir konu oluştururken aceleyle, kullanıcı küçük (küçük harfli) bir harfle bir cümle (başlık) yazmaya başlayabilir. Bu bir dereceye kadar bir hatadır.

Bu sorunu çözmek için size birkaç seçenek göstereceğim: PHP ve CSS, jQuery'nin durumu yayınlanmadan önce bile düzeltebildiği haldeyken zaten yayınlanmış materyaller için daha uygundur.

PHP'de bir dizenin ilk harfi büyüktür

PHP'nin " ucfirst", Bu sadece dizenin ilk karakterini büyük harfe dönüştürür, ancak eksi Kiril alfabesiyle tam olarak doğru çalışmamasıdır.

Bunun için kendi küçük fonksiyonumuzu yazacağız. Uygulama şöyle görünecek:

Bu versiyonda, aslında ihtiyacımız olan büyük harfle başlayan bir cümle alacağız.

CSS'de bir dizenin ilk harfi büyüktür

Bu yöntem görsel olarak (yani sitenin kaynak kodunda teklifler olduğu gibi görünecektir) ilk karakteri de büyük harfe çevirir.

Kullanım şekli aşağıdaki gibidir:

Sözde öğeyi kullanma " ilk harf"Ve özellikler" metin dönüşümü»Paragrafın her ilk harfinin görünümünü ayarladık.

JQuery'de bir dizenin ilk harfi büyüktür

Daha önce de söylediğim gibi, bu dönüştürme yöntemi henüz yayınlanmamış materyaller için en iyisidir.

Örnek olarak, bir metin alanı alacağız (bizim için bir başlık girmek için bir alan görevi görecek) ve onun için küçük harfli bir cümle girerken onu büyük harfle yapan küçük bir komut dosyası yazacağız:

Komut dosyası hem metin yazarken hem de yapıştırırken çalışır. Komut dosyalarının sitenizde çalışması için jQuery kitaplığının bağlı olması gerektiğini unutmayın.

Öğe metninin büyük veya küçük harf karakterlerine dönüştürülmesini kontrol eder. Değer hiçbiri dışında olduğunda, kaynak metnin büyük / küçük harf durumu değişecektir.

kısa bilgi

Tanımlamalar

Değerler

büyük harf Cümledeki her kelimenin ilk karakteri büyük yazılır. Sembollerin geri kalanı görünüşlerini değiştirmez. küçük harf Tüm metin karakterleri küçük harf olur (küçük harf). büyük harf Tüm metin karakterleri büyük harftir (büyük harf). hiçbiri Büyük / küçük harf değişmez.

Kum havuzu

Winnie the Pooh, özellikle sabah saat on birde, her zaman biraz serinletmeye karşı değildi, çünkü bu sırada kahvaltı çoktan sona ermişti ve akşam yemeğinin başlamasını bile düşünmemişti. Ve tabii ki, Tavşan'ın bardak ve tabak çıkardığını görünce çok mutlu oldu.

div (metin dönüşümü: büyük harfle yaz;)

Misal

Orta Çağ kültür anıtı

Amazon ovaları küçük bir kedi ve köpek taşımacılığını üstlenir ve Hayosh Körfezi kırmızı şaraplarıyla ünlüdür.

Bu örneğin sonucu Şekil 1'de gösterilmektedir. 1.

Şekil: 1. Metin dönüştürme özelliğini uygulama

Nesne Modeli

Bir obje.style.textTransform

Şartname

Her şartname birkaç onay aşamasından geçer.

• Öneri - Bu özellik W3C tarafından onaylanmıştır ve standart olarak önerilir.
• Aday Tavsiyesi ( Olası öneri) - standarttan sorumlu grup, hedefleriyle uyumlu olduğundan memnun, ancak standardı uygulamak için geliştirici topluluğunun yardımı gerekiyor.
• Önerilen Öneri ( Önerilen öneri) - Bu noktada, belge nihai onay için W3C Danışma Konseyi'ne sunulur.
• Çalışma Taslağı - Tartışma ve topluluk incelemesi için revizyondan sonra taslağın daha olgun bir versiyonu.
• Editörün taslağı ( Editoryal taslak) - proje editörleri tarafından düzenlendikten sonra standardın taslak versiyonu.
• Taslak ( Taslak şartname) standardın ilk taslağıdır.

Metindeki harflerin durumunu değiştirmenize olanak sağlar.

Varsayılan değer, metin üzerinde hiçbir etkisi olmayan hiçbiri'dir. Metnin durumu aynı kalır. Büyük ve küçük harf değerleri, karakterleri sırasıyla büyük ve küçük harfe dönüştürür. Bir büyük harf yapma değeri belirtirseniz, her sözcüğün yalnızca ilk karakterleri büyük harfle yazılır. Devral, değeri üst öğeden devralır.

Misal

Bu başlık. Büyük harfe ayarlanmış bir metin dönüştürme özelliğine sahiptir. Tüm karakterler büyük harf olacaktır.

Bu paragrafta Küçük Harf Değerine sahip Metin Dönüştürme Özelliği vardır; bu, tüm harflerin küçük harf olacağı anlamına gelir.

Ve bu son paragraf, CAPITALIZE özelliği uygulanmış bir metin dönüştürme özelliğine sahiptir. Her kelimenin ilk harfleri büyük olacak ve sadece bu.

Sonuç

Ancak, hepsi o kadar basit değil. Bazı nüanslar var. Yukarıdaki örneğin ikinci paragrafına dikkat ederseniz, değeri büyük olan paragrafa uygulanan metin dönüştürme özelliğine rağmen sözcüğün büyük harfle yazılmasının, orijinal metne karşılık gelen tamamen büyük harflerle görüntülendiğini fark edeceksiniz. Bu, belirtilen büyük harf değeriyle, kelimelerin sadece ilk harflerinin kontrol edilmesi ve geri kalanının, başlangıç \u200b\u200bdurumlarına bakılmaksızın değişmeden kalmasıyla açıklanmaktadır.
Görünen basitliğine rağmen, metin dönüştürme özelliği çok faydalı olabilir. Örneğin, sitenizdeki tüm H1 başlıklarının metnini büyük harfle yazmak için stil sayfasına bir özellik eklemeniz yeterlidir.

H1 (metin dönüştürme: büyük harf;)

ve sorun çözülecektir. Ve çok, çok fazla olabilecek tüm başlıkları manuel olarak değiştirmenize gerek yok.

CSS büyük harfler Metinleri baştan sona aynı görünen tekdüze bir tasarımın monotonluğunu kırmaya yardımcı olur.

Daha önce ve şimdi büyük harfler

Tarihçiler, bazıları 5. yüzyıla kadar uzanan el yazması el yazmalarında büyük harfler kullandılar. Matbaanın baskının sanayileşmesine izin verdiği 8. yüzyıldan 15. yüzyıla kadar büyük harfler kullanılmaya devam etti. Metnin başına hem el yazısı hem de basılı gömme harfler yerleştirildi. Genellikle mektubun etrafına yerleştirilmiş dekoratif bir desenle dekore edilmişlerdir.

Yükseltilmiş ve alçaltılmış harfler bugün hala kullanılmaktadır. Gazete, dergi ve kitapların yanı sıra dijital baskıda bulunabilirler. Yükseltilmiş mektuplar bazen genişletilmiş olarak adlandırılır. Onları takip eden metnin alt kısmıyla aynı hizada yerleştirilirler. İhmal edilen harfler, bazen metin içeriğinin ana gövdesinin arkasındaki bir katmanda, metnin üst kısmıyla aynı hizadadır veya metnin geri kalanı etraflarında akar.

Yükseltilmiş harfleri tanımlamak çok daha kolaydır çünkü metnin geri kalanıyla aynı hizadadırlar ve genellikle bunu yapmak için dış kenar boşluklarının etrafındaki akışı değiştirmenize gerek yoktur. İhmal edilen harfler daha ince ayar gerektirir. Yükseltilmiş karakterlerin nasıl ele alındığını ilk anlarsanız, bunu çözmeniz daha kolay olacaktır.

Sınıfları kullanma

CSS'ye zaten aşina olan tasarımcılar, ilk büyük harf için ayrı bir CSS sınıfı oluşturmayı bilirler.

Paragraf öğesi ve harfi oluşturan sınıf için CSS şu şekilde görünür:

p (yazı tipi boyutu: 20px; yazı tipi ailesi: Georgia, "Times New Roman", Times, serif;). myinitialcaps (yazı tipi boyutu: 48px; yazı tipi-ailesi: Didot;)

Ve HTML kodu şöyle görünecek:

Bu bize şunu verir:

Çok mu kolay görünüyor? Aslında, her büyük harf özel karakter aralığı gerektirdiğinden, belirli yükseltilmiş harflere göre ayarlamalar yapmanız gerekecektir. Yükseltilmiş harfler ve gövde metni için bir yazı tipi seçtikten sonra, yükseltilmiş her harf için ayrı sınıflar oluşturmanız gerekir. Aşağıda CSS sınıfı.myinitialcapsi sağdaki kutu, I ve n arasındaki mesafeyi azaltmak için negatiftir.

Myinitialcapsi (yazı tipi boyutu: 48px; yazı tipi ailesi: Didot; kenar boşluğu: -1px;)

benbu durumda, "I" ve "n" arasında biraz fazladan boşluk vardır.

bennegatif marjlı yeni bir sınıf dahil etmek onu daha da yakınlaştırır.

Yukarıdaki örnekteki ekran çözünürlüğüne bağlı olarak, I ve n birbirleriyle birleşmiş gibi görünebilir. Bu, harflerin sonunda yer alan seriflerden kaynaklanmaktadır. Bu nedenle, son CSS stillerine karar vermeden önce, siteyi çeşitli cihazlarda test ederek tüm büyük CSS'deki metnin üzerlerinde nasıl göründüğünü görün.

Fiyat teklifleri ve diğer özel durumlar

Sadece metnin başındaki harfleri büyütemezsiniz. Harfin yanında görünen tırnak işaretlerinin daha büyük bir versiyonunu oluşturmak için başka bir sınıf uygulayabilirsiniz. Bizim durumumuzda ne 48 piksel sınıfı ne de 20 piksel metin sınıfı tırnak işaretleri için uygun değildir. Aksine, - 30 piksel arasında bir şey olacaktır. I ile optik olarak hizalamak için tırnak işaretlerini 4 piksel aşağı taşıyacağız:

Myinitialcapsq (yazı tipi boyutu: 30px; yazı tipi ailesi: Didot; float: sol; margin-top: 4px;)

“bennegatif marjlı yeni bir sınıf dahil etmek ”onu daha da yakınlaştırır.

Karakter aralığı ve hizalamalarının çevreleyen biçimlendirmeyle eşleşmesi için, CSS başlıklarının her birini tırnak işaretleriyle birlikte belirtirken çok dikkatli olmanız gerekir. Örneğin, enine çizgisinin düzene görsel olarak uyması için T harfinin paragrafın kenarının biraz ötesine sola kaydırılması gerekecektir. Aynısını C, G, O ve Q gibi yuvarlak harflerle yapmanız gerekecek. Bu örnekte kullanılan yazı tipi boyutları 20, 30 ve 48'dir. Ancak, seçtiğiniz yazı tiplerinin özelliklerine göre boyutları seçmeniz gerekecektir. Sitenin görüntüleneceği ekranların boyutları ve çözünürlükleri.

Sözde öğeler ve sözde sınıflar

CSS sözde öğesi ile paragraf öğesine :: ilk harf ekleyerek kolayca yükseltilmiş bir harf oluşturabilirsiniz. Kullanım: ilk harf ( bir kolon ile) eski tarayıcılar için:

p (yazı tipi boyutu: 1.2em; yazı tipi ailesi: Gürcistan, "Times New Roman", Times, serif; satır yüksekliği: 2em; alt dolgu: 1.2em;) p :: ilk harf (yazı tipi boyutu: 3.6em; text-transform: büyük harf; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0.15 em;)

N ve B harflerinin karakter aralığını hesaba katan CSS sınıflarını içeren HTML kodu şöyle görünecektir ...

İlk harfin büyük olduğu ilk harf.
Satır sonu ile sonraki satırın başlangıç \u200b\u200bsınırı yoktur.

nhTML kaynağında, HTML'deki büyük harf değil, ilk harfin 3.6em'lik ilk büyük harf boyutuna nasıl getirildiği. Düzgün, ha?

But, sabit bir dönüşle ve yeni bir paragraf başlatıldığında, her zaman başka bir başlangıç \u200b\u200bbaşlığı oluşturulur. Kendine soruyor olabilirsin Bunu nasıl açıklayacağım? Çok yeni paragrafın başlangıcında bir baş harf koymam mı gerekiyor? Yapabilirsin. Ama böyle görünmesini istiyor musunuz ve kesinlikle böyle görünmesi gerekiyor mu?

Paragrafın ilk büyük harfi harfe dönüştürülür.
Satır sonundan sonraki ilk harf büyük yazılmayacaktır.

hakkındaHTML kaynağında ilk harfin büyük harfle yazılmadığını, ancak 3.6em karakterine dönüştürüldüğünü unutmayın.

HAKKINDAAncak, zorunlu bir satır sonundan sonra ve her yeni paragrafın başında bile her zaman bir harf oluşturulur. Kendinize şunu sorabilirsiniz: Bunu nasıl açıklarım? Tüm bu durumlar için harf eklemem gerekir mi? Yapabilirsin. Ama gerekli mi?

Sözde öğelerin sağladığı faydalara rağmen, karakter aralığı ve girinti sorunlarını ele almak için ayrı sınıflar tanımlamak için çok sayıda kod eklememiz gerekiyordu. Ancak bu yöntem, her yeni paragrafın ilk harfini CSS'ye büyük harfe dönüştürür. Bazıları için işe yaramayabilir çünkü her paragrafın ilk harfini dönüştürmenize gerek yoktur.

Akıllı bir düzen oluşturmak için sözde sınıfları ve sözde öğeleri birleştirme

İlk çocuk sözde sınıfını eklemek, ilk harflerin gereksiz yere dönüştürülmesi sorununu çözmeye yardımcı olur:

p (yazı tipi boyutu: 1.2em; yazı tipi ailesi: Gürcistan, "Times New Roman", Times, serif; satır yüksekliği: 2em; alt dolgu: 0.5em;) p: birinci çocuk :: ilk harf ( yazı tipi boyutu: 3.6em; metin dönüşümü: büyük harf; yazı tipi ailesi: "Monotype Bernard Condensed", serif; kenar boşluğu: 0.03em;)

Bu kodu HTML ile birleştirmek:

İlk çocuk olarak tanımlanan ilk harf, bu yöntemde yükseltilmiş gömme harflere dönüştürülen tek harftir.

Yalnızca birinci çocuk olarak tanımlanan harf dönüştürüldüğünden, bu örneğin ilk çocuk olmadan öncekinden farklı olduğuna dikkat edin. Ayrıca, bir paragrafın başlangıcından sonraki ilk harfleri ve zorunlu bir satır kesmesinden sonra dönüştürmeyiz. Bu, paragrafların tüm ilk harflerini dönüştürdüğümüzde düzenin nasıl göründüğüne kıyasla daha zarif görünüyor.

Sözde sınıfları kullanmanın avantajı, çeşitli özel durumları ele alma yeteneğidir. Olumsuz yönler ne olacak? Pek çok farklı sözde sınıf vardır ve başınızı döndürmek için pek çok şekilde birleştirilebilirler. Örneğin, sözde sınıflar: first-child ve: first-of-type aynı sonuçları verebilir. Sözde sınıfı yalnızca bir paragrafa değil, aynı zamanda öğelere de uygulayabilirsiniz.