CSS உரை நோக்குநிலை: உலகளாவிய வலை வடிவமைப்புக்கான செங்குத்து உரை கட்டுப்பாட்டில் தேர்ச்சி பெறுதல்

வலை வடிவமைப்பு உலகில், தகவல்களை வெளிப்படுத்துவதிலும், பார்வைக்கு ஈர்க்கும் தளவமைப்புகளை உருவாக்குவதிலும் அச்சுக்கலை ஒரு முக்கிய பங்கு வகிக்கிறது. பல மொழிகளில் கிடைமட்ட உரை இயல்பாக இருந்தாலும், பாரம்பரியமாக செங்குத்து எழுத்துமுறைகளைப் பயன்படுத்தும் மொழிகளைக் கையாளும்போதோ அல்லது தனித்துவமான வடிவமைப்பு கூறுகளை உருவாக்கும்போதோ உரை நோக்குநிலையைக் கட்டுப்படுத்தும் திறன் அவசியமாகிறது. CSS text-orientation பண்பு இந்த கட்டுப்பாட்டை அடைய சக்திவாய்ந்த கருவிகளை வழங்குகிறது, இது உருவாக்குநர்கள் உண்மையான பன்னாட்டு மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வலை அனுபவங்களை உருவாக்க அனுமதிக்கிறது.

text-orientation பண்பைப் புரிந்துகொள்ளுதல்

CSS இல் உள்ள text-orientation பண்பு, ஒரு வரியில் உள்ள உரை எழுத்துக்களின் நோக்குநிலையைக் கட்டுப்படுத்துகிறது. இது முக்கியமாக செங்குத்து எழுதும் முறைகளில் (எ.கா., writing-mode: vertical-rl அல்லது writing-mode: vertical-lr உடன் பயன்படுத்தும்போது) எழுத்துக்களைப் பாதிக்கிறது, ஆனால் சில மதிப்புகளுடன் கிடைமட்ட உரையிலும் தாக்கத்தை ஏற்படுத்தும்.

அடிப்படை மதிப்புகள்

• mixed: இது ஆரம்ப மதிப்பு. இது லத்தீன் எழுத்துக்கள் போன்ற இயல்பாக கிடைமட்டமாக இருக்கும் எழுத்துக்களை 90° கடிகார திசையில் சுழற்றுகிறது. பல CJK எழுத்துக்கள் போன்ற இயல்பாக செங்குத்தாக இருக்கும் எழுத்துக்கள் நேராகவே இருக்கும். கிடைமட்ட மற்றும் செங்குத்து உரைகளைக் கலக்கும்போது இது பெரும்பாலும் விரும்பப்படும் செயல்பாடு.
• upright: இந்த மதிப்பு, அவற்றின் உள்ளார்ந்த நோக்குநிலையைப் பொருட்படுத்தாமல், அனைத்து எழுத்துக்களையும் நேராகக் காட்டுகிறது. கிடைமட்ட எழுத்துக்கள் கிடைமட்ட எழுதும் முறையில் இருப்பது போல் காட்டப்படும். சுழற்சி இல்லாமல் அனைத்து எழுத்துக்களையும் செங்குத்தாகக் காட்ட விரும்பும்போது இது பயனுள்ளதாக இருக்கும்.
• sideways: இந்த மதிப்பு அனைத்து எழுத்துக்களையும் 90° கடிகார திசையில் சுழற்றுகிறது. இது லத்தீன் எழுத்துக்களுக்கு mixed ஐப் போலவே செயல்படுகிறது, ஆனால் இது செங்குத்து எழுத்துக்களையும் சுழற்றும். இது `sideways-right` மற்றும் `sideways-left` க்கு ஆதரவாகப் பயன்பாட்டிலிருந்து நீக்கப்பட்டு வருகிறது.
• sideways-right: அனைத்து எழுத்துக்களையும் 90° கடிகார திசையில் சுழற்றுகிறது. இது சீரான எழுத்து நோக்குநிலையை உறுதி செய்கிறது, இது சில வடிவமைப்பு அழகியல் அல்லது அணுகல்தன்மை தேவைகளுக்கு முக்கியமானதாக இருக்கலாம்.
• sideways-left: அனைத்து எழுத்துக்களையும் 90° எதிர்-கடிகார திசையில் சுழற்றுகிறது.
• use-glyph-orientation: இந்த மதிப்பு பயன்பாட்டிலிருந்து நீக்கப்பட்டது. இது கிளிப்பின் உட்பொதிக்கப்பட்ட நோக்குநிலை தகவலால் (பொதுவாக SVG எழுத்துருக்களில் காணப்படும்) நோக்குநிலை தீர்மானிக்கப்பட வேண்டும் என்று குறிப்பிடுவதற்குப் பயன்படுத்தப்பட்டது.

செய்முறை எடுத்துக்காட்டுகள்: செங்குத்து உரையை செயல்படுத்துதல்

text-orientation பயன்பாட்டை விளக்க, ஒரு எளிய எடுத்துக்காட்டைக் கருத்தில் கொள்வோம்:

            
.vertical-text {
  writing-mode: vertical-rl; /* or vertical-lr */
  text-orientation: upright;
}

            

              
                Copy
              
            
          

இந்த CSS விதி, vertical-text என்ற வகுப்பைக் கொண்ட எந்தவொரு உறுப்பிலும் உள்ள உரையை, அனைத்து எழுத்துக்களையும் நேராகக் கொண்டு, செங்குத்தாகக் காண்பிக்கும். நாம் text-orientation ஐ mixed ஆக மாற்றினால்:

            
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

            

              
                Copy
              
            
          

லத்தீன் எழுத்துக்கள் 90° கடிகார திசையில் சுழற்றப்படும், அதே நேரத்தில் செங்குத்து எழுத்துக்கள் நேராகவே இருக்கும். upright மற்றும் mixed ஆகியவற்றுக்கு இடையேயான தேர்வு, விரும்பிய காட்சி விளைவு மற்றும் உரையில் உள்ள எழுத்துக்களின் கலவையைப் பொறுத்தது.

உலகளாவிய பரிசீலனைகள் மற்றும் மொழி ஆதரவு

பாரம்பரியமாக செங்குத்து எழுதும் முறைகளைப் பயன்படுத்தும் மொழிகளுக்கு text-orientation பண்பு குறிப்பாக முக்கியமானது, அவை:

• சீனம்: நவீன சீன மொழியில் பெரும்பாலும் கிடைமட்ட உரை பயன்படுத்தப்பட்டாலும், பாரம்பரிய புத்தகங்கள், அடையாளங்கள் மற்றும் கலை வடிவமைப்புகள் போன்ற சில சூழல்களில் செங்குத்து எழுத்து இன்னும் பயன்படுத்தப்படுகிறது.
• ஜப்பானியம்: ஜப்பானிய மொழியை கிடைமட்டமாகவும் செங்குத்தாகவும் எழுதலாம். நாவல்கள், செய்தித்தாள்கள் மற்றும் மங்காவில் செங்குத்து எழுத்து பொதுவானது.
• கொரியன்: சீனம் மற்றும் ஜப்பானியத்தைப் போலவே, கொரிய மொழியும் கிடைமட்ட மற்றும் செங்குத்து எழுத்துக்களை ஆதரிக்கிறது.
• மங்கோலியன்: பாரம்பரிய மங்கோலியன் எழுத்துமுறை செங்குத்தாக எழுதப்படுகிறது.

இந்த மொழிகளுக்காக வடிவமைக்கும்போது, உரை சரியாகவும் தெளிவாகவும் காட்டப்படுவதை உறுதிப்படுத்த text-orientation ஐ writing-mode பண்புடன் இணைந்து பயன்படுத்துவது முக்கியம். `upright` மற்றும் `mixed` நோக்குநிலைகளுக்கு இடையே தேர்வு செய்யும்போது கலாச்சார சூழல் மற்றும் நோக்கம் கொண்ட பார்வையாளர்களைக் கருத்தில் கொள்ளுங்கள்.

எடுத்துக்காட்டாக, ஜப்பானிய மொழியில், text-orientation: upright ஐ writing-mode: vertical-rl உடன் பயன்படுத்துவது அனைத்து எழுத்துக்களையும் சுழற்சியின்றி செங்குத்தாகக் காண்பிக்கும், இது பெரும்பாலும் விரும்பப்படும் பாணியாகும். text-orientation: mixed ஐப் பயன்படுத்துவது லத்தீன் எழுத்துக்களைச் சுழற்றும், இது சில வடிவமைப்புகளில் பொருத்தமானதாக இருக்கலாம், ஆனால் மற்றவற்றில் அவ்வாறு இருக்காது. CSS இல் உள்ள `direction` பண்பையும் கவனத்தில் கொள்வது அவசியம், ஏனெனில் இது `writing-mode` உடன் இணைந்து காட்சியளிக்கும் திசையை பாதிக்கலாம்.

மேம்பட்ட நுட்பங்கள் மற்றும் பயன்பாட்டு வழக்குகள்

செங்குத்து வழிசெலுத்தல் மெனுக்களை உருவாக்குதல்

text-orientation க்கான ஒரு பொதுவான பயன்பாட்டு வழக்கு செங்குத்து வழிசெலுத்தல் மெனுக்களை உருவாக்குவதாகும். writing-mode மற்றும் text-orientation ஐ இணைப்பதன் மூலம், பாரம்பரிய கிடைமட்ட மெனுக்களிலிருந்து தனித்து நிற்கும் பார்வைக்கு ஈர்க்கக்கூடிய மெனுக்களை எளிதாக உருவாக்கலாம்.

            
<nav class="vertical-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

            

              
                Copy
              
            
          

            
.vertical-nav {
  width: 50px; /* Adjust as needed */
}

.vertical-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transition: background-color 0.3s ease;
}

.vertical-nav li a:hover {
  background-color: #f0f0f0;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு செங்குத்தாகக் காட்டப்படும் இணைப்புகளுடன் ஒரு எளிய செங்குத்து வழிசெலுத்தல் மெனுவை உருவாக்குகிறது. flex-direction: column பட்டியல் உருப்படிகள் செங்குத்தாக அமைக்கப்பட்டிருப்பதை உறுதி செய்கிறது, மேலும் text-orientation: upright உரையை நேராக வைத்திருக்கிறது. ஒட்டுமொத்த வடிவமைப்பிற்குப் பொருந்தும் வகையில் அகலம், பேடிங் மற்றும் வண்ணங்களில் மாற்றங்களைச் செய்யலாம்.

தலைப்புகள் மற்றும் தலைப்புகளில் செங்குத்து உரை

text-orientation ஐப் பயன்படுத்தி பார்வைக்கு சுவாரஸ்யமான தலைப்புகளை உருவாக்கலாம். எடுத்துக்காட்டாக, நீங்கள் ஒரு பக்கப்பட்டியில் அல்லது ஒரு பக்கத்தில் அலங்கார உறுப்பாக செங்குத்து உரையைப் பயன்படுத்தலாம்.

            
<div class="vertical-heading">
  <h1>Vertical Title</h1>
</div>

            

              
                Copy
              
            
          

            
.vertical-heading {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* Or upright, depending on the desired effect */
  margin-bottom: 20px;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு h1 உறுப்பை செங்குத்தாகக் காட்டுகிறது. mixed மற்றும் upright ஆகியவற்றுக்கு இடையேயான தேர்வு, நீங்கள் லத்தீன் எழுத்துக்களைச் சுழற்ற விரும்புகிறீர்களா என்பதைப் பொறுத்தது.

மற்ற CSS பண்புகளுடன் இணைத்தல்

text-orientation பண்பை மற்ற CSS பண்புகளுடன் இணைத்து இன்னும் அதிநவீன விளைவுகளை உருவாக்கலாம். எடுத்துக்காட்டாக, நீங்கள் transform: rotate() ஐப் பயன்படுத்தி முழு செங்குத்து உரைத் தொகுதியையும் ஒரு கோணத்தில் சுழற்றலாம்.

            
.rotated-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(-90deg); /* Rotate counter-clockwise */
}

            

              
                Copy
              
            
          

இது முழு செங்குத்து உரைத் தொகுதியையும் 90 டிகிரி எதிர்-கடிகார திசையில் சுழற்றும். தனித்துவமான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வடிவமைப்புகளை அடைய வெவ்வேறு சுழற்சி கோணங்கள் மற்றும் பிற CSS பண்புகளுடன் பரிசோதனை செய்யுங்கள்.

அணுகல்தன்மை பரிசீலனைகள்

text-orientation ஐப் பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது முக்கியம். மாற்றுத்திறனாளிகள் உட்பட அனைத்து பயனர்களுக்கும் உரை தெளிவாகவும் புரியும்படியும் இருப்பதை உறுதிசெய்யுங்கள். இங்கே சில முக்கிய பரிசீலனைகள்:

• போதுமான கான்ட்ராஸ்ட்: உரைக்கும் பின்னணி நிறத்திற்கும் இடையே போதுமான கான்ட்ராஸ்ட் இருப்பதை உறுதிசெய்யுங்கள். இது செங்குத்து உரைக்கு குறிப்பாக முக்கியமானது, ஏனெனில் இது கிடைமட்ட உரையை விட படிக்க கடினமாக இருக்கலாம். கான்ட்ராஸ்ட் விகிதங்களை சரிபார்க்க WebAIM Contrast Checker போன்ற கருவிகளைப் பயன்படுத்தவும்.
• எழுத்துரு அளவு: படிக்க எளிதான பொருத்தமான எழுத்துரு அளவைப் பயன்படுத்தவும். குறிப்பாக செங்குத்து உரைக்கு, அதிகப்படியான சிறிய எழுத்துரு அளவுகளைப் பயன்படுத்துவதைத் தவிர்க்கவும். தேவைப்பட்டால் பயனர்கள் எழுத்துரு அளவுகளை சரிசெய்ய அனுமதிக்கவும்.
• வரி உயரம் மற்றும் எழுத்து இடைவெளி: வாசிப்புத்திறனை மேம்படுத்த வரி உயரம் (line-height) மற்றும் எழுத்து இடைவெளி (letter-spacing) ஆகியவற்றை சரிசெய்யவும். செங்குத்து உரைக்கு கிடைமட்ட உரையை விட வேறுபட்ட வரி உயரம் மற்றும் எழுத்து இடைவெளி மதிப்புகள் தேவைப்படலாம்.
• ஸ்கிரீன் ரீடர் இணக்கத்தன்மை: செங்குத்து உரை சரியாக அறிவிக்கப்படுகிறதா என்பதை உறுதிப்படுத்த ஸ்கிரீன் ரீடர்களுடன் சோதிக்கவும். ஸ்கிரீன் ரீடர்கள் செங்குத்து உரையை எப்போதும் சரியாகக் கையாளாமல் போகலாம், எனவே உள்ளடக்கம் அணுகக்கூடியதா என்பதைச் சரிபார்ப்பது முக்கியம்.
• விசைப்பலகை வழிசெலுத்தல்: செங்குத்து உரையுடன் விசைப்பலகை வழிசெலுத்தல் சரியாகச் செயல்படுவதை உறுதிசெய்யுங்கள். பயனர்கள் விசைப்பலகையைப் பயன்படுத்தி எந்த பிரச்சனையும் இல்லாமல் உள்ளடக்கத்தின் வழியாக செல்ல முடியும்.
• செமாண்டிக் HTML ஐப் பயன்படுத்தவும்: உள்ளடக்கத்தை கட்டமைக்க பொருத்தமான செமாண்டிக் HTML உறுப்புகளைப் பயன்படுத்தவும். இது ஸ்கிரீன் ரீடர்கள் உள்ளடக்கத்தைப் புரிந்துகொள்ள உதவுகிறது மற்றும் சிறந்த பயனர் அனுபவத்தை வழங்குகிறது. எடுத்துக்காட்டாக, வழிசெலுத்தல் மெனுக்களுக்கு <nav> மற்றும் முக்கிய உள்ளடக்கப் பிரிவுகளுக்கு <article> ஐப் பயன்படுத்தவும்.

குறுக்கு-உலாவி இணக்கத்தன்மை

text-orientation பண்பு நவீன உலாவிகளில் நல்ல குறுக்கு-உலாவி இணக்கத்தன்மையைக் கொண்டுள்ளது. இருப்பினும், உங்கள் வடிவமைப்புகள் வெவ்வேறு உலாவிகளில் சரியாகக் காட்டப்படுகின்றனவா என்பதை உறுதிப்படுத்த அவற்றைச் சோதிப்பது எப்போதும் ஒரு நல்ல யோசனையாகும். பழைய உலாவிகளை நீங்கள் ஆதரிக்க வேண்டும் என்றால் உலாவி முன்னொட்டுகளைப் (இப்போதெல்லாம் பொதுவாகத் தேவையில்லை) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

உலாவி ஆதரவின் பொதுவான கண்ணோட்டம் இங்கே:

• Chrome: ஆதரிக்கப்படுகிறது.
• Firefox: ஆதரிக்கப்படுகிறது.
• Safari: ஆதரிக்கப்படுகிறது.
• Edge: ஆதரிக்கப்படுகிறது.
• Internet Explorer: பகுதி ஆதரவு, முழு செயல்பாட்டிற்கு முன்னொட்டுகள் அல்லது பாலிஃபில்கள் தேவைப்படலாம். IE இன் பழைய பதிப்புகளில் செங்குத்து உரையைத் தவிர்ப்பதைக் கருத்தில் கொள்ளுங்கள்.

text-orientation மற்றும் பிற CSS பண்புகளுக்கான சமீபத்திய உலாவி இணக்கத்தன்மை தகவலைச் சரிபார்க்க Can I Use (caniuse.com) போன்ற கருவிகளைப் பயன்படுத்தவும்.

text-orientation ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

• writing-mode உடன் பயன்படுத்தவும்: உரை சரியாகக் காட்டப்படுவதை உறுதிப்படுத்த, எப்போதும் text-orientation ஐ writing-mode பண்புடன் இணைந்து பயன்படுத்தவும்.
• மொழி மற்றும் கலாச்சாரத்தைக் கருத்தில் கொள்ளுங்கள்: upright மற்றும் mixed க்கு இடையில் தேர்வு செய்யும்போது மொழி மற்றும் கலாச்சார சூழலைக் கணக்கில் எடுத்துக்கொள்ளுங்கள்.
• அணுகல்தன்மைக்கு சோதிக்கவும்: உங்கள் வடிவமைப்புகள் அனைத்து பயனர்களுக்கும் பயன்படுத்தக்கூடியவை என்பதை உறுதிப்படுத்த எப்போதும் அணுகல்தன்மைக்கு சோதிக்கவும்.
• வாசிப்புத்திறனைப் பராமரிக்கவும்: செங்குத்தாகக் காட்டப்படும்போதும் உரை தெளிவாகவும் படிக்க எளிதாகவும் இருப்பதை உறுதிசெய்யுங்கள்.
• த sparingly ஆகப் பயன்படுத்தவும்: உங்கள் வடிவமைப்புகளின் காட்சி முறையீட்டை மேம்படுத்த செங்குத்து உரையைத் sparingly மற்றும் மூலோபாய ரீதியாகப் பயன்படுத்தவும். செங்குத்து உரையை அதிகமாகப் பயன்படுத்துவது உள்ளடக்கத்தைப் படிக்க கடினமாக்கும் மற்றும் ஒட்டுமொத்த பயனர் அனுபவத்தைக் குறைக்கும்.

முடிவுரை

text-orientation பண்பு வலை வடிவமைப்பில் உரையின் நோக்குநிலையைக் கட்டுப்படுத்துவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். அதன் வெவ்வேறு மதிப்புகளைப் புரிந்துகொண்டு, அதை writing-mode பண்புடன் இணைந்து எவ்வாறு பயன்படுத்துவது என்பதன் மூலம், பல்வேறு மொழிகள் மற்றும் வடிவமைப்பு அழகியல்களுக்கு ஏற்றவாறு பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பன்னாட்டு வலை அனுபவங்களை நீங்கள் உருவாக்கலாம். உங்கள் வடிவமைப்புகள் அனைத்து பயனர்களுக்கும் பயன்படுத்தக்கூடியவை என்பதை உறுதிப்படுத்த அணுகல்தன்மை மற்றும் குறுக்கு-உலாவி இணக்கத்தன்மையைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.

CSS உடன் செங்குத்து உரை கட்டுப்பாட்டின் கலையில் தேர்ச்சி பெறுவதன் மூலம், ஆக்கப்பூர்வமான மற்றும் ஈர்க்கக்கூடிய வலை வடிவமைப்பிற்கான புதிய சாத்தியக்கூறுகளை நீங்கள் திறக்கலாம், இது உங்கள் வலைத்தளங்களை உலகளாவிய டிஜிட்டல் நிலப்பரப்பில் தனித்து நிற்கச் செய்யும்.