Shpesh me nxitim kur shtoni materiale në sit ose, për shembull, duke krijuar një temë të re në forum, përdoruesi mund të fillojë të shkruajë një fjali (titull) me një shkronjë të vogël (të vogël). Ky është deri diku një gabim.

Unë do t'ju tregoj disa opsione për zgjidhjen e këtij problemi: PHP dhe CSS janë më të përshtatshme për materiale të botuara tashmë, kur mënyra se si jQuery mund ta rregullojë situatën edhe para botimit.

Shkronja e parë e një vargu është e madhe në PHP

PHP ka një funksion të quajtur " e para", E cila thjesht shndërron karakterin e parë të vargut në të madhe, por minus është se nuk funksionon si duhet me alfabetin cirilik.

Për ta bërë këtë, ne do të shkruajmë funksionin tonë të vogël. Zbatimi do të duket kështu:

Në këtë version, ne do të marrim një fjali që fillon me një shkronjë të madhe, e cila, në fakt, është ajo që na duhet.

Shkronja e parë e vargut me shkronja të mëdha në CSS

Kjo metodë vizualisht (domethënë, në kodin burimor të faqes, ofertat do të shfaqen ashtu siç janë) gjithashtu konverton karakterin e parë në shkronjë të madhe.

Përdorimi është si më poshtë:

Duke përdorur pseudo-elementin " shkronja e parë"Dhe pronat" tekst-shndërroj»Ne kemi vendosur pamjen për secilën shkronjë të parë të paragrafit.

Shkronja e parë e një vargu është e madhe në jQuery

Siç e thashë më parë, kjo metodë e konvertimit është më e përshtatshme për materialet që ende nuk janë botuar.

Për shembull, ne do të marrim një fushë teksti (do të veprojë si fushë për futjen e një titulli për ne) dhe do të shkruajmë një skenar të vogël për të, i cili, kur futni një fjali me një shkronjë të vogël, e bën atë me një shkronjë të madhe:

Skenari funksionon si kur shkruan tekstin ashtu edhe thjesht e ngjit atë. Mos harroni se që skriptet të funksionojnë në faqen tuaj, duhet të keni të lidhur bibliotekën jQuery.

Kontrollon shndërrimin e tekstit të elementit në karaktere të mëdha ose të vogla. Kur vlera është ndryshe nga asnjë, rasti i tekstit burimor do të ndryshohet.

informacion i shkurtër

Përcaktimet

Vlerat

shkruaj me shkronjë të madhe Karakteri i parë i secilës fjalë në fjali do të shkruhet me shkronjë të madhe. Pjesa tjetër e simboleve nuk e ndryshojnë pamjen e tyre. të vogla Të gjithë personazhet e tekstit bëhen të vogla (të vogla). e madhe Të gjithë personazhet e tekstit janë të mëdha (të mëdha). asnjë Nuk e ndryshon rastin.

Kuti rëre

Winnie the Pooh nuk ishte gjithmonë urrejtës për të patur një pije freskuese të vogël, sidomos në njëmbëdhjetë në mëngjes, sepse në atë kohë mëngjesi kishte kohë që kishte mbaruar dhe darka as që kishte menduar të fillonte. Dhe, sigurisht, ai ishte jashtëzakonisht i lumtur kur pa Rabbit duke nxjerrë gota dhe pjata.

div (transformo tekstin: shkruaj me germa të mëdha;)

Shembull

Monumenti kulturor i Mesjetës

Ultësira Amazonian merr një transport të vogël të maceve dhe qenve, dhe Hayosh Bay është i famshëm për verërat e tij të kuqe.

Rezultati i këtij shembulli është treguar në Fig. 1

Figura: 1. Zbatimi i karakteristikës së transformimit të tekstit

Modeli i objektit

Nje objekt. stili.tekstiTransformo

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

• Rekomandim - Kjo specifikim është miratuar nga W3C dhe rekomandohet si standard.
• Rekomandimi i kandidatit ( Rekomandimi i mundshëm) - grupi përgjegjës për standardin është i kënaqur që është në përputhje me objektivat e tij, por kërkohet ndihma e komunitetit të zhvilluesve për të zbatuar standardin.
• Rekomandimi i Propozuar ( Rekomandim i sugjeruar) - Në këtë pikë, dokumenti i paraqitet Këshillit Këshillimor të W3C për aprovim përfundimtar.
• Drafti i punës - Një version më i pjekur i draftit pas diskutimit dhe rishikimit për rishikimin e komunitetit.
• Drafti i redaktorit ( Drafti editorial) - një version i standardit pas redaktimit nga redaktorët e projektit.
• Draft ( Specifikimi i draftit) është drafti i parë i standardit.

Ju lejon të ndryshoni shkronjat e shkronjave të tekstit.

Vlera e paracaktuar nuk është asnjë, e cila nuk ka asnjë efekt në tekst. Rasti i tekstit mbetet i njëjtë. Vlerat e mëdha dhe të vogla konvertojnë karakteret përkatësisht në shkronja të mëdha dhe të vogla. Nëse specifikoni një vlerë të madhe, atëherë vetëm karakteret e para të secilës fjalë do të shkruhen me shkronjë të madhe. Trashëgimia trashëgon vlerën nga prindi.

Shembull

Ky është titulli. Ka një veti të transformimit të tekstit të vendosur në shkronjë të madhe. Të gjithë personazhet do të jenë të mëdha.

Ky paragraf ka një Veti të transformuar teksti me një vlerë të vogël, që do të thotë se të gjitha shkronjat do të jenë me të vogla.

Dhe ky paragraf i fundit ka një veti të transformimit të tekstit me një veti të KAPITALIZUAR të aplikuar. Shkronjat e para të secilës fjalë do të jenë të mëdha, dhe vetëm kaq.

Rezultati

Megjithatë, jo të gjitha kaq të thjeshta. Ka disa nuanca. Nëse i kushtoni vëmendje paragrafit të dytë të shembullit të mësipërm, do të vini re se fjala kapitalizoj, pavarësisht nga vetia e transformimit të tekstit që aplikohet në paragraf me vlerën e shkronjës së madhe, shfaqet tërësisht me shkronja të mëdha, që i përgjigjet tekstit origjinal. Kjo shpjegohet me faktin se me vlerën e caktuar të shkronjave të mëdha, kontrollohen vetëm shkronjat e para të fjalëve, dhe pjesa tjetër mbetet e pandryshuar, pavarësisht nga gjendja e tyre fillestare.
Pavarësisht nga thjeshtësia e saj në dukje, prona e transformimit të tekstit mund të jetë shumë e dobishme. Për shembull, për të kapitalizuar tekstin e të gjitha titujve H1 në faqen tuaj, gjithçka që duhet të bëni është të shtoni një pronë në fletën tuaj të stileve

H1 (transformimi i tekstit: i madh;)

dhe problemi do te zgjidhet. Dhe nuk keni nevojë të ndryshoni manualisht të gjitha kokat, të cilat mund të jenë shumë, shumë.

Shkronjat e mëdha CSS ndihmojnë për të thyer monotoninë e një modeli uniform, tekstet e së cilës duken të njëjta nga fillimi në fund.

Më herët dhe tani hidhni kapakët

Kronikanët përdorën shkronja të mëdha në dorëshkrime të shkruara me dorë, disa prej të cilave datojnë në shekullin e 5-të. Shkronjat e mëdha vazhduan të përdoren nga shekujt VIII deri në XV, kur shtypshkronja lejoi që shtypshkronja të industrializohej. Të dyja kapakët e shkruar me dorë dhe të shtypura u vendosën në fillim të tekstit. Ata shpesh zbukuroheshin me një model dekorativ që ishte vendosur rreth letrës.

Shkronjat e ngritura dhe të ulura përdoren edhe sot. Ato mund të gjenden në gazeta, revista dhe libra, si dhe në shtypjen dixhitale. Letrat e ngritura ndonjëherë referohen si të zgjatura. Ato vendosen në një nivel me pjesën e poshtme të tekstit që i ndjek ato. Shkronjat e braktisura janë në një nivel me pjesën e sipërme të tekstit, ndonjëherë në një shtresë prapa pjesës kryesore të përmbajtjes së tekstit, ose pjesa tjetër e tekstit rrjedh rreth tyre.

Shkronjat e ngritura janë shumë më të lehta për t'u përcaktuar, sepse ato janë shumë me pjesën tjetër të tekstit dhe zakonisht nuk keni nevojë të ndryshoni rrjedhën rreth kufijve të jashtëm për këtë. Letrat e harruara kërkojnë një akordim më të mirë. Do të jetë më e lehtë për ju ta zgjidhni këtë nëse së pari kuptoni se si trajtohen personazhet e ngritur.

Përdorimi i orëve

Projektuesit që janë tashmë të njohur me CSS dinë të krijojnë një klasë të veçantë CSS për shkronjën e parë të madhe.

CSS për elementin e paragrafit dhe klasën që krijon shkronjën do të dukej kështu:

p (madhësia e shkronjave: 20px; familja e shkronjave: Georgia, "Times New Roman", Times, serif;) .kaps kapitale (madhësia e shkronjave: 48px; familja e shkronjave: Didot;)

Dhe kodi HTML do të duket kështu:

E cila na jep:

Duket shumë e lehtë? Në fakt, ju do të duhet të bëni rregullime bazuar në shkronjat specifike të ngritura, pasi çdo shkronjë e madhe kërkon kerning të veçantë. Pasi të keni zgjedhur një shkronjë për shkronjat e ngritura dhe për tekstin e trupit, duhet të krijoni klasa të ndara për secilën shkronjë të ngritur. Në më poshtë Klasa CSS. Kapitali fillestar kutia në të djathtë është negative për të zvogëluar distancën midis I dhe n.

Myinitialcapsi (madhësia e shkronjave: 48px; familja e shkronjave: Didot; diferenca-djathtas: -1px;)

Unenë këtë rast, ka një hapësirë \u200b\u200bshtesë midis "Unë" dhe "n".

Uneduke përfshirë një klasë të re me një diferencë negative e tërheq atë më afër.

Në varësi të rezolucionit të ekranit në shembullin e mësipërm, unë dhe n mund të dukemi sikur janë bashkuar së bashku. Kjo është për shkak të serifeve në skajet e shkronjave. Prandaj, përpara se të vendosni për stilet përfundimtare të CSS, provoni faqen në pajisje të ndryshme për të parë se si duket teksti në të gjitha shkronjat CSS.

Citate dhe raste të tjera të veçanta

Ju mund të zmadhoni jo vetëm shkronjat në fillim të tekstit. Mund të zbatoni një klasë tjetër për të krijuar një version më të madh të thonjëzave që shfaqen pranë shkronjës. Në rastin tonë, as klasa 48-pixel dhe as klasa 20-pixel e tekstit nuk janë të përshtatshme për thonjëza. Përkundrazi, do të jetë diçka në mes - 30 pixel. Ne do t'i zhvendosim kuotat poshtë 4 pikselëve për t'i rreshtuar në mënyrë optike me I:

Myinitialcapsq (madhësia e shkronjave: 30px; font-family: Didot; noton: majtas; margin-top: 4px;)

“Uneduke përfshirë ”një klasë të re me një diferencë negative e tërheq atë më afër.

Duhet të jeni shumë të kujdesshëm në lidhje me specifikimin e secilës kapak të CSS-së, së bashku me kuotat, në mënyrë që kernerizimi dhe shtrirja e tyre të përputhen me shenjën përreth. Për shembull, shkronja T do të duhet të zhvendoset majtas, pak përtej buzës së paragrafit, në mënyrë që vija e saj tërthore të përshtatet vizualisht në paraqitjen. Do të duhet të bëni të njëjtën gjë me shkronja të rrumbullakëta si C, G, O dhe Q. Në këtë shembull, madhësitë e shkronjave të përdorura janë 20, 30 dhe 48. Por do t'ju duhet të zgjidhni madhësitë bazuar në specifikat e shkronjave që keni zgjedhur. Si dhe madhësitë dhe rezolucionet e ekraneve në të cilat do të shikohet faqja.

Pseudo-elemente dhe pseudo-klasa

Me një pseudo-element CSS, ju lehtë mund të krijoni një letër të ngritur duke shtuar :: shkronjën e parë në elementin e paragrafit. Përdorni: shkronja e parë ( me një zorrë të trashë) për shfletuesit e vjetëruar:

p (madhësia e shkronjave: 1,2em; familja e shkronjave: Georgia, "Times New Roman", Times, serif; lartësia e vijës: 2em; fundi i mbushjes: 1,2em;) p :: shkronja e parë (madhësia e shkronjave: 3.6em; transformimi i tekstit: i madh; font-family: "Monotipi Bernard Condensed", serif; margjina-djathtas: 0,03em;). Fillimi (margjina-djathtas: -0.1em;). Fillimi (kufiri-djathtas: -0.15 em;)

Kodi HTML që përmban klasat CSS që marrin parasysh kernerin e shkronjave N dhe B do të duket kështu ...

Një letër fillestare, me shkronjën e parë që është një shkronjë e madhe.
Me një ndërprerje të linjës, linja tjetër nuk ka kapak fillestar.

nnë burimin HTML se si shkronja e parë, jo një shkronjë e madhe në HTML, merr madhësinë në madhësinë fillestare të kapakut prej 3.6em. I zoti, hë?

Bme një kthim të vështirë dhe një paragraf i ri filloi, një kapak tjetër fillestar gjithmonë krijohet. Ju mund të pyesni veten, Si do të jap llogari për këtë? A duhet të kem një kapak fillestar në fillim të paragrafit shumë të ri? Epo, mundeni. Por, a doni që ajo të duket në atë mënyrë, dhe a duhet absolutisht të duket në atë mënyrë?

Shkronja e parë e madhe e paragrafit shndërrohet në një shkronjë.
Shkronja e parë pas ndërprerjes së rreshtit nuk do të shkruhet me shkronjë të madhe.

rrethVini re se në burimin HTML, shkronja e parë nuk është e shkruar me të madhe, por ajo është konvertuar në një karakter 3.6em.

RRETHSidoqoftë, edhe pas një ndërprerje të detyruar të vijës, dhe në fillim të çdo paragrafi të ri, gjithmonë krijohet një letër. Ju mund të pyesni veten: Si ta llogaris këtë? A duhet të shtoj letra për të gjitha këto raste? Epo, ju mundeni. Por a është e nevojshme?

Edhe me përfitimet që japin pseudo-elementet, na është dashur të shtojmë shumë kod për të përcaktuar klasa të ndara për të trajtuar çështjet e kerningut dhe indentacionit. Por kjo metodë shndërron shkronjën e parë të çdo paragrafi të ri në CSS një shkronjë të madhe. Për disa, mund të mos funksionojë sepse nuk keni nevojë të ktheni shkronjën e parë të secilit paragraf.

Kombinimi i pseudo-klasave dhe pseudo-elementeve për të krijuar një plan urbanistik inteligjent

Shtimi i klasës pseudo të fëmijëve të parë ndihmon në zgjidhjen e problemit të shndërrimit të panevojshëm të shkronjave të para:

p (madhësia e shkronjave: 1.2em; familja e shkronjave: Georgia, "Times New Roman", Times, serif; lartësia e vijës: 2em; fundi i mbushjes: 0.5em;) p: fëmija i parë :: shkronja e parë ( madhësia e shkronjave: 3.6em; transformimi i tekstit: shkronja e madhe; familja e shkronjave: "Monotipi Bernard i kondensuar", serif; diferenca-djathtas: 0.03em;)

Kombinimi i këtij kodi me HTML:

Shkronja e parë, e cila përcaktohet si fëmija i parë, është shkronja e vetme që shndërrohet në një kapak të ngritur në këtë metodë.

Meqenëse vetëm letra e përcaktuar si fëmijë i parë është konvertuar, vini re se ky shembull ndryshon nga ai i mëparshmi, pa fëmijën e parë. Për më tepër, ne nuk i konvertojmë shkronjat e para pas fillimit të një paragrafi dhe pas një ndërprerjeje të detyruar të vijës. Kjo duket më elegante se sa dukej paraqitja kur konvertuam të gjitha shkronjat e para të paragrafëve.

Përparësia e përdorimit të pseudo-klasave është aftësia për të trajtuar raste të ndryshme të veçanta. Po disavantazhet? Ka shumë pseudo-klasa të ndryshme, dhe ato mund të kombinohen në aq shumë mënyra sa që mund të bëjë që koka juaj të rrotullohet. Për shembull, klasat pseudo: fëmija i parë dhe: tipi i parë mund të japin të njëjtat rezultate. Ju gjithashtu mund ta aplikoni pseudo-klasën jo vetëm në një paragraf, por edhe në elemente