CSS3 & తెలుగు: డ్రాప్ క్యాప్ శైలి

వ్యాసంలో లేదా కథలో మొదటి అక్షరాన్ని పెద్దగా ప్రత్యేకంగా చూపించడం ముద్రణారంగంలో ఒక సాంప్రదాయం. జాలంలో కూడా ఇలా సింగారించడానికి జనాలు పలు పద్ధతులు వాడుతున్నారు, వాటిలో ప్రముఖంగా చెప్పుకోదగ్గది మొదటి అక్షరాన్ని ప్రత్యేక మార్కప్ ద్వారా గుర్తించడం. CSS ::first-letter సూడో-మూలకాన్ని అన్ని ఆధునిక జాల విహారిణులూ అమలుపరిచాకా, డ్రాప్ క్యాప్ అలంకరణకు అదే తేలిక మార్గం అయ్యింది.

ఉదాహరణకు, ప్రతీ పేరాలో మొదటి అక్షరాన్ని పెద్దగా చూపించడానికి ఈ క్రింది CSS నియమాన్ని వాడుకోవచ్చు:

p::first-letter { font-size: 3em; }

కానీ కేవలం మొదటి పేరా లోని మొదటి అక్షరానికి మాత్రమే వర్తించాలంటే:

p:first-child::first-letter { font-size: 2em; color: red; }

పై నియమంలో, :first-child అనే సూడో-తరగతి <p> మూలకం అది ఉన్న స్థాయిలో మొదటిది అయితే గనక గుర్తిస్తుంది.

అక్కడవరకూ బానే ఉంది. కానీ తెలుగు విషయానికి వచ్చేసరికి, జాల విహారిణులు మొదటి అక్షరాన్ని సరిగా గుర్తించలేకపోతున్నాయి. (తెలుగులో ఒక అక్షరం 7 యూనికోడ్ కోడుపాయింట్ల వరకూ, అంతకంటే ఎక్కువకూడా, ఉండొచ్చు. ఉదాహరణకు స్ట్రాంగ్ అనే పదంలో మొదటి అక్షరం “స్ట్రాం”లో 7 కోడుపాయింట్లు ఉన్నాయి.) ఫైర్‌ఫాక్స్ వారికి నేను ఈ దోషాన్ని నివేదించాను. ఆ దోషం సరయ్యింది కనుక ఫైర్‌ఫాక్స్ ఇప్పుడు తెలుగు మొదటి అక్షరాన్ని సరిగానే గుర్తుపడుతూంది.

వివిధ విహారిణుల్లో తెలుగుకి సంబంధించి ::first-letter సూడో-మూలకానికి ఉన్న తోడ్పాటు ఇదీ (బొమ్మను ఇంకా పెద్దగా చూడడానికి దానిపై నొక్కండి):

మీ అభిమాన విహారిణిలో దీన్ని పరీక్షించి చూడడానికి ఈ పేజీ (మరోటి) ఉపయోగపడవచ్చు. ఏమైనా సమస్యలు ఉంటే, మీ విహారిణి తయారీదారుకి నివేదించండి.

ఈ టపా ఆంగ్లంలో కూడా చదవవచ్చు.