Jassif Team Institution

CSS Text Alignment மற்றும் Text Direction

இந்த அத்தியாயத்தில் நீங்கள் பின்வரும் பண்புகளைப் பற்றி கற்றுக்கொள்வீர்கள்:

• text-align
• text-align-last
• vertical-align
• direction
• unicode-bidi

Text Alignment

text-align பண்பு ஒரு உரையின் கிடைமட்ட சீரமைப்பை அமைக்க பயன்படுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• left - உரையை இடதுபுறமாக சீரமைக்கிறது
• right - உரையை வலதுபுறமாக சீரமைக்கிறது
• center - உரையை மையத்தில் சீரமைக்கிறது
• justify - ஒவ்வொரு வரிக்கும் சமமான அகலம் இருக்கும் வகையில் வரிகளை நீட்டிக்கிறது

பின்வரும் எடுத்துக்காட்டு இடது, வலது மற்றும் மைய சீரமைக்கப்பட்ட உரையைக் காட்டுகிறது (உரை திசை இடமிருந்து வலமாக இருந்தால் இடது இயல்புநிலை, மற்றும் உரை திசை வலமிருந்து இடமாக இருந்தால் வலது இயல்புநிலை):

எடுத்துக்காட்டு

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

text-align பண்பு "justify" ஆக அமைக்கப்பட்டால், ஒவ்வொரு வரியும் நீட்டிக்கப்படுகிறது, இதனால் ஒவ்வொரு வரிக்கும் சமமான அகலம் இருக்கும், மற்றும் இடது மற்றும் வலது விளிம்புகள் நேராக இருக்கும் (பத்திரிகைகள் மற்றும் செய்தித்தாள்களைப் போல):

div {
  text-align: justify;
}

Text Align Last

text-align-last பண்பு ஒரு உரையின் கடைசி வரியை எவ்வாறு சீரமைப்பது என்பதை குறிப்பிடுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• auto - இயல்புநிலை மதிப்பு. கடைசி வரி நியாயப்படுத்தப்பட்டு இடதுபுறமாக சீரமைக்கப்படுகிறது
• left - கடைசி வரி இடதுபுறமாக சீரமைக்கப்படுகிறது
• right - கடைசி வரி வலதுபுறமாக சீரமைக்கப்படுகிறது
• center - கடைசி வரி மையத்தில் சீரமைக்கப்படுகிறது
• justify - கடைசி வரி மற்ற வரிகளைப் போலவே நியாயப்படுத்தப்படுகிறது
• start - கடைசி வரி வரியின் தொடக்கத்தில் சீரமைக்கப்படுகிறது
• end - கடைசி வரி வரியின் முடிவில் சீரமைக்கப்படுகிறது

எடுத்துக்காட்டு

மூன்று <p> உறுப்புகளில் கடைசி வரியின் வெவ்வேறு சீரமைப்பு:

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Vertical Alignment

vertical-align பண்பு ஒரு உறுப்பின் செங்குத்து சீரமைப்பை அமைக்கிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• baseline - இயல்புநிலை மதிப்பு. உறுப்பு பெற்றோரின் அடிப்படைக் கோட்டுடன் சீரமைக்கப்படுகிறது
• length/% - குறிப்பிட்ட நீளம் அல்லது சதவீதத்தால் ஒரு உறுப்பை உயர்த்துகிறது அல்லது குறைக்கிறது
• sub - உறுப்பு பெற்றோரின் சப்ஸ்கிரிப்ட் அடிப்படைக் கோட்டுடன் சீரமைக்கப்படுகிறது
• super - உறுப்பு பெற்றோரின் சூப்பர்ஸ்கிரிப்ட் அடிப்படைக் கோட்டுடன் சீரமைக்கப்படுகிறது
• top - உறுப்பு வரியில் உள்ள மிக உயரமான உறுப்பின் மேல்பகுதியுடன் சீரமைக்கப்படுகிறது
• text-top - உறுப்பு பெற்றோர் உறுப்பின் எழுத்துருவின் மேல்பகுதியுடன் சீரமைக்கப்படுகிறது
• middle - உறுப்பு பெற்றோர் உறுப்பின் நடுவில் வைக்கப்படுகிறது
• bottom - உறுப்பு வரியில் உள்ள மிக குறைந்த உறுப்புடன் சீரமைக்கப்படுகிறது
• text-bottom - உறுப்பு பெற்றோர் உறுப்பின் எழுத்துருவின் கீழ்ப்பகுதியுடன் சீரமைக்கப்படுகிறது

எடுத்துக்காட்டு

உரையில் ஒரு படத்தின் செங்குத்து சீரமைப்பை அமைக்கவும்:

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

Text Direction

direction பண்பு தொகுதி-நிலை உறுப்புக்குள் உரை திசை/எழுதும் திசையை குறிப்பிடுகிறது.

எடுத்துக்காட்டு

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

CSS Text Alignment பயிற்சி

இந்த டுடோரியலில் உள்ள பல அத்தியாயங்கள் உங்கள் அறிவு நிலையைச் சரிபார்க்கக்கூடிய பயிற்சியுடன் முடிகின்றன.

CSS Text Alignment/Direction பண்புகள்