Ko'pincha, saytga material qo'shishda yoki, masalan, forumda yangi mavzu yaratishda, foydalanuvchi kichik (kichik) harf bilan jumla (sarlavha) yozishni boshlashi mumkin. Bu ma'lum darajada xato.

Men ushbu muammoni hal qilishning bir nechta variantlarini ko'rsataman: PHP va CSS allaqachon chop etilgan materiallar uchun ko'proq mos keladi, jQuery nashrdan oldin vaziyatni to'g'irlashi mumkin.

PHPda katta harflar bilan yozilgan satrning birinchi harfi

PHPda “ucfirst” funksiyasi bor, u faqat satrning birinchi belgisini bosh harfga o'zgartiradi, lekin uning kamchiligi kirill alifbosi bilan unchalik to'g'ri ishlamaydi.

Buning uchun biz o'zimizning kichik funksiyamizni yozamiz. Amalga oshirish quyidagicha ko'rinadi:

Ushbu versiyada biz bosh harf bilan boshlanadigan jumlani olamiz, bu aslida bizga kerak bo'lgan narsadir.

CSS-da satrning bosh harfi

Bu usul vizual (ya'ni manba kodi sayt takliflari xuddi shunday ko'rinadi) shuningdek, birinchi belgini katta harfga o'zgartiradi.

Foydalanish quyidagicha:

birinchi jumla

ikkinchi jumla

uchinchi jumla

to'rtinchi jumla

#content p:birinchi harf (matnni o'zgartirish: katta harf; )

"Birinchi harf" psevdo-elementi va "matnni o'zgartirish" xususiyatidan foydalanib, biz xatboshining har bir birinchi harfi uchun dizaynni o'rnatamiz.

jQuery-da katta harf bilan yozilgan satrning birinchi harfi

Yuqorida aytib o'tganimdek, ushbu konvertatsiya usuli hali nashr etilmagan materiallar uchun eng mos keladi.

Misol uchun, biz matn maydonini olamiz (u sarlavha kiritish uchun maydon vazifasini bajaradi) va unga kichik skript yozamiz, bu kichik harf bilan jumlani kiritishda uni bosh harfga aylantiradi:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1) $(bu).val(yangi_matn ));

Skript matn yozishda ham, uni oddiygina kiritishda ham ishlaydi. Skriptlar saytingizda ishlashi uchun jQuery kutubxonasi yoqilgan bo'lishi kerakligini unutmang.

Matn harflarining registrini o'zgartirish imkonini beradi.

Standart qiymat none ga o'rnatiladi, bu matnga ta'sir qilmaydi. Matnning holati bir xil bo'lib qoladi. Katta va kichik harflar qiymatlari belgilarni mos ravishda katta va kichik harflarga aylantiradi. Agar siz katta harf bilan belgilasangiz, har bir so'zning faqat birinchi belgilari bosh harf bilan yoziladi. Inherit o'z ota-onasining qiymatini meros qilib oladi.

Misol h3 ( matnni o'zgartirish: katta harf; ) .kichik harf ( matnni o'zgartirish: kichik harf; ) .kapitallashtirish ( matnni o'zgartirish: katta harf; ) matnni o'zgartirish Bu sarlavha. Unda matnni o'zgartirish xususiyati katta harf bilan qo'llaniladi. Barcha belgilar katta harf bilan yoziladi.

Ushbu paragrafga kichik harf bilan matnni o'zgartirish xususiyati qo'llaniladi, ya'ni barcha harflar kichik harflarda bo'ladi.

Va bu oxirgi paragrafga CAPITALIZE xususiyatiga ega matnni o'zgartirish xususiyati qo'llaniladi. Har bir so'zning birinchi harflari katta harf bilan yoziladi va faqat ular.

Natija

Biroq, hammasi ham oddiy emas. Ba'zi nuanslar mavjud. Yuqoridagi misolning ikkinchi xatboshiga nazar tashlasangiz, bosh harf bilan yozish soʻzi xatboshiga qoʻllanilgan matnni oʻzgartirish xususiyati qoʻllanilishiga qaramay, toʻliq bosh harflar bilan koʻrsatilishini va bu asl matnga mos kelishini sezasiz. Bu katta harfning belgilangan qiymati bilan so'zlarning faqat birinchi harflari tekshirilishi, qolganlari esa boshlang'ich holatidan qat'iy nazar o'zgarishsiz qolishi bilan izohlanadi.
Ko'rinib turgan soddaligiga qaramay, matnni o'zgartirish xususiyati juda foydali bo'lishi mumkin. Masalan, saytingizning barcha H1 sarlavhalari matnini katta harf bilan yozish uchun uslublar jadvaliga bitta xususiyat qo'shishingiz kifoya.

H1 (matnni o'zgartirish: katta harf;)

va muammo hal bo'ladi. Va siz juda ko'p bo'lishi mumkin bo'lgan barcha sarlavhalarni qo'lda o'zgartirishingiz shart emas.

yoki harflar va HTML CSS formatlash haqida batafsil

Bobda Gipermatnni belgilash maydonidan harflarni formatlash misollari keltirilgan.

Chapdagi menyuda siz zamonaviy va juda batafsil HTML darsliklarini topasiz.

Ular sizga veb-saytingizni noldan yaratishga imkon beradi, ammo hozircha biroz pastroqqa qarang.

Bu qiziqarli bo'lishi mumkin.

davr axborot jamiyati

Insoniyat o'z taraqqiyotining yangi davriga kirdi, unda axborot va tarmoq texnologiyalari nihoyatda muhim rol o‘ynaydi. Biz axborot va telekommunikatsiya texnologiyalarining jadal rivojlanishi bilan ajralib turadigan axborot jamiyati davrida yashayapmiz. Kompyuter va Internetning paydo bo'lishi bilan ulkan o'zgarishlar boshlandi. Kompyuter va Internet jamiyatni yangi xulq-atvor normalari, qoidalari va ideallarini ishlab chiqishga undamoqda. Avvalgisi uchun televizor qanday bo'lsa, Internet yangi avlod uchun ham shunday. Lekin Global tarmoq televideniyega qaraganda ancha funktsional, chunki u xarid qilish, sotish, aloqa va takliflarni amalga oshirish imkoniyatini beradi turli yo'llar bilan shaxsiy Internet sahifalari va veb-saytlarni yaratish kabi o'zini namoyon qilish.

HTML harflari: bosh harflar

Xat formatlash misoli:

Formatlash natijasi:

Katta harflar bilan yozilgan erkin matnga misol

Katta harflar bilan yozilgan erkin matnga misol

Teglar - aniqlang Bosh harflar(bu teglar HTML 5 da qo'llab-quvvatlanmaydi).

CSS kodi style="text-transform:upppercase" - belgilaydi Bosh harflar.

Boshqacha qilib aytganda, bosh harflar bilan belgilanadi CSS yordamida atributlar.

HTML harflari va ular orasidagi CSS oralig'i

Xat formatlash misoli:

Formatlash natijasi:

O'zboshimchalik bilan HTML matn va harflar orasidagi CSS oralig'i 2 piksel

Atributlar va qiymatlarning tavsifi:

CSS kodi style="letter-spacing:2px" - belgilaydi CSS harflar oralig'i.

Chapdagi menyuda shunga o'xshash formatlash misollarini qidiring. E'tiboringiz uchun rahmat.

Bosh harf, ta'rifga ko'ra, matnning nisbatan kattalashtirilgan elementi bo'lib, deyarli barcha tillarda gap bosh harf bilan boshlanadi. Va paragrafning boshini ko'zga ko'ringan bosh harf bilan loyihalash matnni tuzishga imkon beradi va uni idrok etishni osonlashtiradi. Internet sahifasi ishlab chiqilganda, matn muallifning afzalliklari va rus tili qoidalariga muvofiq yozilishi mumkin. Shuningdek, siz CSS kengaytmali faylga - uslublar jadvaliga ma'lum "buyruqlar" kiritish orqali uning dizaynini "avtomatlashtirishingiz" yoki o'zingizning dizayningizni to'ldirishingiz mumkin. html fayli uslublar bo'limi. Bir vaqtning o'zida matn bo'ylab ba'zi dizayn elementlarini tezda o'zgartirish uchun CSS odatda html-ga qo'shimcha ravishda o'rganiladi.

Bu, ayniqsa, agar sayt yuzlab sahifalarga ega bo'lsa, to'g'ri keladi va ularning har biriga o'zgartirish kiritish juda ko'p mehnat talab qiladigan jarayondir.

Agar siz CSS-ni qo'llasangiz, har bir paragrafning boshidagi bosh harflar alohida ko'rinishi mumkin. Masalan, html-ga qavssiz kiritilgan quyidagi kod “p” tegi bilan formatlangan matnni bosh harf – birinchi harf – kattaroq – standart o‘lchamdan 220%, sariq – rang qiymati sariq va uni matnning qolgan qismidan farqli shriftda yozing - Georgia vs. batangche.

()

p: birinchi harf (shrift oilasi: Jorjiya; shrift o'lchami: 220%; rang: sariq;)

()

Rasmlar ko'rinishida o'zingizning shriftingizni yaratib, chiroyli bosh harflarni olishingiz mumkin - har bir harf uchun alohida rasm mavjud, masalan, qadimgi rus yoki gotika uslubida. Ular chizilgan bo'lishi mumkin Keyin, kerakli joylarda, bosh harf o'rniga, qavslarsiz kodni kiritishingiz mumkin (). Qo'shimcha atributlar balandlik va kenglik bo'ladi - matnning qolgan qismi bilan uyg'un kombinatsiya uchun piksellarda o'rnatilishi mumkin bo'lgan tasvirning kengligi va balandligi. Misol: (). Atrofdagi qavslar< и >olib tashlaymiz.

Agar siz alifboni o'zingiz chizish imkoniga ega bo'lmasangiz, unda bosh harfni joylashtirilgan shriftlar yordamida loyihalash mumkin. bepul kirish Google (shriftlar bo'limi) yoki boshqa qidiruv tizimlari va resurslarida. Buning uchun yuqoridagi kodni quyidagicha formatlash kerak:

()

p (shrift oilasi: batangche; shrift o'lchami: 93%;)

p: birinchi harf (shrift oilasi: Kelly+Slab; shrift o'lchami: 220%; rang: ko'k;)

()

().

Google xizmati sizga birini yoki boshqasini tanlash imkonini beradi va html yoki CSS-ga kiritish uchun tayyor havolalarni taqdim etadi. Sizning e'tiboringizni shrift guruhini tanlash zarurligiga qaratamiz - lotin yoki kirill, chunki... Rus tilidagi matnni formatlashda deyarli barcha lotin shriftlari ishlamaydi. Yoniq bu daqiqa Qidiruv tizimi 40 ga yaqin turlarni bepul taqdim etadi.

Bosh harf yoki uning antipodi yordamida uslublash mumkin CSS xususiyatlari matnni o'zgartirish. Agar siz uslublar jadvalida matnni o'zgartirish qiymatini o'rnatsangiz: u holda matn siz yozgandek ko'rinadi. Barcha harflarni kichik harflarga aylantirish uchun matn konvertatsiyasi qiymatini belgilashingiz kerak: kichik harflar, ikki nuqta bilan ajratilgan va katta harflar uchun - katta harflar. Matnni o'zgartirish xususiyatini o'rnatish: bosh harfni har bir so'z boshida bosh harfga ega bo'lishiga olib keladi.

CSS qopqoqlari umumiy dizayndagi monotonlikni buzishga yordam beradi, bunda matn boshidan oxirigacha bir xil ko'rinadi.

Bosh harflar o'sha paytda va hozir

Solnomachilar qo'lyozma qo'lyozmalarida bosh harflardan foydalanganlar, ularning ba'zilari V asrga to'g'ri keladi. Bosh harflar 8—15-asrlarda ham qoʻllanila boshlandi, oʻshanda bosma mashinalar bosmachilikni sanoat darajasiga olib chiqish imkonini bergan. Matn boshida qo'lda yozilgan va bosma bosh harflar qo'yilgan. Ular ko'pincha xat atrofida joylashgan dekorativ naqsh bilan bezatilgan.

Ko'tarilgan va tushirilgan harflar bugungi kunda ham qo'llaniladi. Ularni gazetalar, jurnallar va kitoblarda, shuningdek raqamli bosib chiqarishda topish mumkin. Ko'tarilgan tur ba'zan cho'zilgan tip deb ataladi. Ular o'zlaridan keyingi matnning pastki qismi bilan bir tekisda joylashtiriladi. Tushgan harflar matnning yuqori qismi bilan bir tekisda, ba'zan matn mazmuni orqasidagi qatlamda joylashtiriladi yoki matnning qolgan qismi ularni o'rab oladi.

Ko'tarilgan harflarni aniqlash ancha oson, chunki ular matnning qolgan qismi bilan bir xilda joylashgan va odatda tashqi chetlari atrofidagi o'rashni o'zgartirishga hojat yo'q. O'tkazib yuborilgan harflar ko'proq narsani talab qiladi puxta sozlash. Agar siz avval ko'tarilgan belgilar qanday ishlanishini tushunsangiz, buni tushunishingiz osonroq bo'ladi.

Sinflardan foydalanish

CSS haqida allaqachon tushunchaga ega bo'lgan dizaynerlar birinchi bosh harf uchun alohida CSS sinfini yaratish kerakligini bilishadi.

Paragraf elementi va xatni yaratuvchi sinf uchun CSS kodi quyidagicha ko'rinadi:

p (shrift o'lchami: 20px; shrift-family: Georgia, "Times New Roman", Times, serif;).myinitialcaps (shrift-size: 48px; font-family: Didot;)

Va HTML kodi quyidagicha ko'rinadi:

Bizga nima beradi:

Juda oson ko'rinadimi? Haqiqatan ham ko'tarilgan maxsus harflarga qarab o'zgartirishlar kiritishingiz kerak bo'ladi, chunki har bir bosh harf maxsus kerningni talab qiladi. Ko'tarilgan harflar va asosiy matn uchun shriftni tanlagandan so'ng, har bir ko'tarilgan harf uchun alohida sinflarni yaratishingiz kerak. Quyidagi CSS sinfida .myinitialcapsi, I va n orasidagi masofani kamaytirish uchun o'ngdagi chekka manfiy qiymatga o'rnatiladi.

Myinitialcapsi (shrift o'lchami: 48px; shrift oilasi: Didot; chekka o'ng: -1px;)

Bunday holda, "I" va "n" o'rtasida qo'shimcha bo'sh joy mavjud.

Salbiy chegara bilan yangi sinfni qo'shish uni yaqinlashtiradi.

Yuqoridagi misoldagi ekran o'lchamlariga qarab, I va n birgalikda xiralashgandek ko'rinishi mumkin. Bu harflar oxiridagi seriflar bilan bog'liq. Shuning uchun, yakuniy CSS uslublarini tanlashdan oldin, saytni sinab ko'ring turli qurilmalar CSS bosh harflaridagi matn qanday ko'rinishini ko'rish uchun.

Iqtibos va boshqa maxsus holatlar

Siz nafaqat matnning boshidagi harflarni kattalashtirishingiz mumkin. Harf yonida paydo bo'ladigan tirnoq belgilarining kattaroq versiyasini yaratish uchun siz boshqa sinfni amalga oshirishingiz mumkin. Bizning holatlarimizda qo'shtirnoq uchun 48 o'lchamli harflar sinfi ham, 20 pikselli matn sinfi ham mos kelmaydi. Aksincha, bu 30 piksel orasida bo'ladi. Qo'shtirnoqlarni optik jihatdan I bilan moslashtirish uchun ularni 4 piksel pastga siljitamiz:

Myinitialcapsq (shrift o'lchami: 30px; shrift oilasi: Didot; float: chap; margin-top: 4px;)

Salbiy chegara bilan yangi sinfni "shu jumladan" uni yaqinlashtiradi.

Har bir CSS bosh harflarini qo'shtirnoqlar bilan o'rnatishda juda ehtiyot bo'lishingiz kerak, shunda ularning kerning va hizalanishi atrofdagi belgilarga mos keladi. Masalan, T harfini chapga, paragrafning chetidan biroz uzoqroqqa siljitish kerak, shunda uning ko'ndalang chizig'i vizual tarzda tartibga mos keladi. C, G, O va Q kabi yumaloq harflar bilan ham xuddi shunday qilishingiz kerak bo'ladi. Ushbu misolda 20, 30 va 48 shrift o'lchamlari qo'llaniladi. Lekin siz tanlagan maxsus shriftlar asosida o'lchamlarni tanlashingiz kerak bo'ladi. Shuningdek, sayt ko'riladigan ekranlarning o'lchamlari va o'lchamlari.

Psevdoelementlar va psevdosinflar

CSS psevdo-elementidan foydalanib, paragraf elementiga ::birinchi harfni qo'shish orqali osongina baland harf yaratishingiz mumkin. Eski brauzerlar uchun :birinchi harf (bitta nuqta bilan) dan foydalaning:

p (shrift o'lchami: 1,2em; shrift oilasi: Georgia, "Times New Roman", Times, serif; satr balandligi:2em; to'ldirish-pastki:1,2em;) p::birinchi harf (shrift o'lchami: 3.6em; matn-transform: katta harflar; "Monotype Bernard Condensed", serif; margin-right: -0.1em;). em;)

N va B harflarining kerningini hisobga oladigan CSS sinflarini o'z ichiga olgan HTML kodi shunday ko'rinadi...

Bosh harf, birinchi harf bosh harf.
Satr uzilishi bilan keyingi satrda boshlang'ich qopqoq yo'q.

HTML manbasida bosh harf emas, balki birinchi harf 3.6em lik bosh harf hajmiga qanday o'lchanganiga e'tibor bering. Toza, a?

Ammo qiyin qaytish va yangi paragraf boshlanganda, har doim boshqa boshlang'ich qopqoq yaratiladi. Siz o'zingizdan so'rashingiz mumkin: men buni qanday hisoblayman? Juda yangi paragrafning boshida boshlang'ich qalpoq bo'lishi kerakmi? Xo'sh, mumkin. Ammo, siz uning shunday ko'rinishini xohlaysizmi va u mutlaqo shunday ko'rinishi kerakmi?

Paragrafning birinchi bosh harfi harfga aylantiriladi.
Satr uzilishidan keyingi birinchi harf bosh harfga aylantirilmaydi.

oE'tibor bering, HTML manba kodida birinchi harf katta harf bilan yozilmaydi, lekin u 3,6 em belgiga aylantiriladi.

Biroq, majburiy satr uzilishidan keyin ham, har doim har bir yangi paragrafning boshida harf yaratiladi. Siz o'zingizga savol berishingiz mumkin: buni qanday hisobga olishim mumkin? Bu barcha holatlar uchun harflar qo'shishim kerakmi? Xo'sh, qila olasiz. Ammo bu kerakmi?

Pseudo-elementlar taqdim etadigan imtiyozlarga qaramay, biz kerning va to'ldirish masalalarini hal qilish uchun alohida sinflarni aniqlash uchun juda ko'p kod qo'shishimiz kerak edi. Ammo bu usul har bir yangi paragrafning birinchi harfini CSS bosh harfiga aylantiradi. Bu ba'zilar uchun mos kelmasligi mumkin, chunki har bir paragrafning birinchi harfini o'zgartirishingiz shart emas.

Aqlli tartib yaratish uchun psevdosinflar va psevdoelementlarni birlashtirish

:first-child pseudo-klassini qo'shish birinchi harflarni keraksiz konvertatsiya qilish muammosini hal qilishga yordam beradi:

p (shrift o'lchami: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; satr balandligi: 2em; to'ldirish-pastki: 0.5em;) p:birinchi bola::birinchi harf ( font-size: 3.6em; text-transform: shrift-family: "Monotype Bernard Condensed", margin-right: 0.03em;)

Ushbu kodni HTML bilan birlashtirish:

Birinchi farzand sifatida belgilangan birinchi harf, bu usul bilan ko'tarilgan tomchiga aylantiriladigan yagona harfdir.

Faqat birinchi farzand sifatida belgilangan harf o'zgartirilganligi sababli, bu misol avvalgisidan farq qiladi, birinchi farzandsiz. Bundan tashqari, biz birinchi harflarni paragraf boshidan keyin va majburiy satr uzilishidan keyin aylantirmaymiz. Bu paragraflarning barcha birinchi harflarini o'zgartirganimizda tartib qanday ko'rinishga ega bo'lganidan ko'ra nafisroq ko'rinadi.

Pseudo-sinflardan foydalanishning afzalligi turli xil maxsus holatlarni ko'rib chiqish qobiliyatidir. Kamchiliklari haqida nima deyish mumkin? Turli xil psevdo-sinflar mavjud va ular juda ko'p usullar bilan birlashtirilishi mumkin, bu sizning boshingizni aylantiradi. Masalan, psevdo-sinflar :first-child va :first-of-type bir xil natijalarni berishi mumkin. Siz psevdo-sinfni nafaqat paragrafga, balki elementlarga ham qo'llashingiz mumkin. Misol uchun, Didot shriftida quyida ko'tarilgan harflar misolida ko'rsatilganidek. Margin atributi A ning o'ng tomoniga qanday qo'shilganiga e'tibor bering. Aks holda, u bo'lim boshida s harfi bilan "yopishadi":

bo'lim (shrift o'lchami: 1,2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) bo'lim>p:birinchi bola:birinchi harf (shrift o'lchami: 4em; matn-transform: shrift-family: Didot, margin-right: 5px;)

Va HTML bilan birga:

Bo'limning boshida birinchi harf uchun ko'tarilgan tomchi qopqog'i ko'rsatilgan.

Va yangi paragraf ...

Agar o'zingizni eksperimental his qilsangiz, :first-child va :first-of-type ga qo'shimcha ravishda turli usullarni ham o'rganishingiz mumkin. Masalan, :nth-of-type yoki :nth-of-child kabi bu yoki boshqa turdagi psevdosinflardan CSS bosh harflari matni uchun qanday foydalanish mumkinligini koʻrish uchun. Ushbu maqolada keltirilgan tamoyillarga amal qilasizmi yoki chuqurroq qazishni boshlaysizmi, CSS psevdo-sinflari birinchi bola , :birinchi turdagi va :birinchi harf bilan qanday ishlashni o'rganganingizdan so'ng, ariza topshirishingiz mumkin bo'ladi. ularni HTML elementlariga to'g'ri kiriting.