தமிழ்

பதிலளிக்கக்கூடிய, சர்வதேச வலை வடிவமைப்பிற்கு CSS லாஜிக்கல் பண்புகளின் ஆற்றலைத் திறக்கவும். வெவ்வேறு எழுத்து முறைகள் மற்றும் மொழிகளுக்கு தடையின்றி பொருந்தக்கூடிய தளவமைப்புகளை உருவாக்குவது எப்படி என்று அறிக.

உலகளாவிய தளவமைப்புகளை உருவாக்குதல்: CSS லாஜிக்கல் பண்புகளில் ஒரு ஆழமான பார்வை

இன்றைய ஒன்றோடொன்று இணைக்கப்பட்ட உலகில், வலைத்தளங்கள் பல்வேறு உலகளாவிய பார்வையாளர்களை பூர்த்தி செய்ய வேண்டும். இதன் பொருள், இடமிருந்து வலம் (LTR) முதல் வலமிருந்து இடம் (RTL) மற்றும் செங்குத்து எழுத்து வரை பல்வேறு மொழிகள் மற்றும் எழுத்து முறைகளை ஆதரிப்பதாகும். பாரம்பரிய CSS பண்புகளான left, right, top, மற்றும் bottom போன்றவை இயல்பாகவே திசையைச் சார்ந்துள்ளன, இதனால் வெவ்வேறு எழுத்து முறைகளுக்கு தடையின்றி பொருந்தக்கூடிய தளவமைப்புகளை உருவாக்குவது சவாலாக உள்ளது. இங்குதான் CSS லாஜிக்கல் பண்புகள் உதவுகின்றன.

CSS லாஜிக்கல் பண்புகள் என்றால் என்ன?

CSS லாஜிக்கல் பண்புகள் என்பது இயற்பியல் திசைகளை விட உள்ளடக்கத்தின் ஓட்டத்தை (flow) அடிப்படையாகக் கொண்டு தளவமைப்பு திசைகளை வரையறுக்கும் CSS பண்புகளின் தொகுப்பாகும். அவை திரையின் இயற்பியல் நோக்குநிலையை ஒதுக்கி வைத்து, எழுத்து முறை அல்லது திசையைப் பொருட்படுத்தாமல் சீராகப் பொருந்தக்கூடிய தளவமைப்பு விதிகளை வரையறுக்க உங்களை அனுமதிக்கின்றன.

left மற்றும் right என்று சிந்திப்பதற்கு பதிலாக, நீங்கள் start மற்றும் end என்று சிந்திக்கிறீர்கள். top மற்றும் bottom என்பதற்கு பதிலாக, நீங்கள் block-start மற்றும் block-end என்று சிந்திக்கிறீர்கள். பின்னர் உலாவி இந்த லாஜிக்கல் திசைகளை ஒரு உறுப்பின் எழுத்து முறையின் அடிப்படையில் பொருத்தமான இயற்பியல் திசைகளுக்கு தானாகவே மேப் செய்கிறது.

முக்கிய கருத்துக்கள்: எழுதும் முறைகள் மற்றும் உரை திசை

குறிப்பிட்ட பண்புகளுக்குள் செல்வதற்கு முன், இரண்டு அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது முக்கியம்:

எழுதும் முறைகள்

எழுதும் முறைகள், உரையின் வரிகள் எந்த திசையில் அமைக்கப்பட வேண்டும் என்பதை வரையறுக்கின்றன. இரண்டு மிகவும் பொதுவான எழுதும் முறைகள்:

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

உரை திசை

உரை திசையானது, ஒரு வரியில் எழுத்துக்கள் எந்த திசையில் காட்டப்படுகின்றன என்பதைக் குறிப்பிடுகிறது. மிகவும் பொதுவான உரை திசைகள்:

இந்தப் பண்புகள் முறையே writing-mode மற்றும் direction CSS பண்புகளைப் பயன்படுத்தி அமைக்கப்படுகின்றன. உதாரணமாக:

.rtl-example { direction: rtl; } .vertical-example { writing-mode: vertical-rl; }

முக்கிய லாஜிக்கல் பண்புகள்

மிக முக்கியமான CSS லாஜிக்கல் பண்புகள் மற்றும் அவை அவற்றின் இயற்பியல் đối tácர்களுடன் எவ்வாறு தொடர்புபடுகின்றன என்பதன் முறிவு இங்கே:

பாக்ஸ் மாடல் பண்புகள்

இந்தப் பண்புகள் ஒரு உறுப்பின் பேடிங், மார்ஜின் மற்றும் பார்டரைக் கட்டுப்படுத்துகின்றன.

உதாரணம்: உரை திசையைப் பொருட்படுத்தாமல் நிலையான பேடிங்குடன் ஒரு பொத்தானை உருவாக்குதல்:

.button { padding-inline-start: 1em; padding-inline-end: 1em; }

நிலைப்படுத்தல் பண்புகள்

இந்தப் பண்புகள் ஒரு உறுப்பு அதன் பெற்றோருக்குள் இருக்கும் நிலையைக் கட்டுப்படுத்துகின்றன.

உதாரணம்: ஒரு உறுப்பை அதன் கண்டெய்னரின் ஆரம்ப மற்றும் மேல் விளிம்புகளுக்கு சார்பாக நிலைநிறுத்துதல்:

.element { position: absolute; inset-inline-start: 10px; inset-block-start: 20px; }

ஃப்ளோ தளவமைப்பு பண்புகள்

இந்தப் பண்புகள் ஒரு கண்டெய்னருக்குள் உள்ளடக்கத்தின் தளவமைப்பைக் கட்டுப்படுத்துகின்றன.

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

.image { float-inline-start: left; /* LTR மற்றும் RTL இரண்டிலும் சீரான காட்சி இடம் */ }

அளவு பண்புகள்

செங்குத்து எழுதும் முறைகளுடன் பணிபுரியும் போது இவை குறிப்பாக பயனுள்ளதாக இருக்கும்.

லாஜிக்கல் பண்புகளைப் பயன்படுத்துவதன் நன்மைகள்

CSS லாஜிக்கல் பண்புகளை ஏற்றுக்கொள்வது சர்வதேச வலை வடிவமைப்பிற்கு பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

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

எடுத்துக்காட்டு 1: ஒரு வழிசெலுத்தல் மெனுவை உருவாக்குதல்

ஒரு வழிசெலுத்தல் மெனுவைக் கவனியுங்கள், அதில் மெனு உருப்படிகள் LTR மொழிகளில் வலதுபுறமாகவும், RTL மொழிகளில் இடதுபுறமாகவும் சீரமைக்கப்பட வேண்டும்.

.nav { display: flex; justify-content: flex-end; /* உருப்படிகளை வரியின் முடிவில் சீரமைக்கவும் */ }

இந்த வழக்கில், flex-end-ஐப் பயன்படுத்துவது, ஒவ்வொரு திசைக்கும் தனித்தனி ஸ்டைல்கள் தேவையில்லாமல், மெனு உருப்படிகள் LTR-இல் வலதுபுறமாகவும், RTL-இல் இடதுபுறமாகவும் சீரமைக்கப்படுவதை உறுதி செய்கிறது.

எடுத்துக்காட்டு 2: ஒரு அரட்டை இடைமுகத்தை ஸ்டைலிங் செய்தல்

ஒரு அரட்டை இடைமுகத்தில், அனுப்புநரிடமிருந்து வரும் செய்திகளை வலதுபுறத்திலும், பெறுநரிடமிருந்து வரும் செய்திகளை இடதுபுறத்திலும் (LTR-இல்) காட்ட விரும்பலாம். RTL-இல், இது தலைகீழாக இருக்க வேண்டும்.

.message.sender { margin-inline-start: auto; /* அனுப்புநர் செய்திகளை முடிவுக்குத் தள்ளவும் */ } .message.receiver { margin-inline-end: auto; /* பெறுநர் செய்திகளை தொடக்கத்திற்குத் தள்ளவும் (LTR இல் திறம்பட இடதுபுறம்) */ }

எடுத்துக்காட்டு 3: ஒரு எளிய கார்டு தளவமைப்பை உருவாக்குதல்

LTR-இல் இடதுபுறம் ஒரு படமும் வலதுபுறம் உரை உள்ளடக்கமும் கொண்ட ஒரு கார்டை உருவாக்கவும், RTL-இல் நேர்மாறாகவும்.

.card { display: flex; } .card img { margin-inline-end: 1em; }

படத்தில் உள்ள margin-inline-end தானாகவே LTR-இல் வலதுபுறத்திலும், RTL-இல் இடதுபுறத்திலும் ஒரு மார்ஜினைப் பயன்படுத்தும்.

எடுத்துக்காட்டு 4: நிலையான சீரமைப்புடன் உள்ளீட்டு புலங்களைக் கையாளுதல்

LTR தளவமைப்புகளில் உள்ளீட்டு புலங்களுக்கு வலதுபுறம் லேபிள்கள் சீரமைக்கப்பட்ட ஒரு படிவத்தை கற்பனை செய்து பாருங்கள். RTL-இல், லேபிள்கள் இடதுபுறத்தில் இருக்க வேண்டும்.

.form-group { display: flex; align-items: center; } .form-group label { text-align: end; padding-inline-end: 0.5em; width: 100px; /* லேபிளுக்கு நிலையான அகலம் */ } .form-group input { flex: 1; }

text-align: end ஐப் பயன்படுத்துவது உரையை LTR-இல் வலதுபுறமாகவும் RTL-இல் இடதுபுறமாகவும் சீரமைக்கிறது. padding-inline-end தளவமைப்பு திசையைப் பொருட்படுத்தாமல் நிலையான இடைவெளியை வழங்குகிறது.

இயற்பியல் பண்புகளிலிருந்து லாஜிக்கல் பண்புகளுக்கு மாறுதல்

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

  1. திசை-சார்ந்த ஸ்டைல்களை அடையாளம் காணுதல்: left, right, margin-left, margin-right போன்ற இயற்பியல் பண்புகளைப் பயன்படுத்தும் CSS விதிகளை அடையாளம் காண்பதன் மூலம் தொடங்கவும்.
  2. லாஜிக்கல் பண்பு சமமானவைகளை உருவாக்குதல்: ஒவ்வொரு திசை-சார்ந்த விதிக்கும், லாஜிக்கல் பண்புகளைப் பயன்படுத்தி ஒரு தொடர்புடைய விதியை உருவாக்கவும் (எ.கா., margin-left-ஐ margin-inline-start உடன் மாற்றவும்).
  3. முழுமையாகச் சோதிக்கவும்: புதிய லாஜிக்கல் பண்புகள் சரியாக வேலை செய்கின்றனவா என்பதை உறுதிப்படுத்த, உங்கள் மாற்றங்களை LTR மற்றும் RTL தளவமைப்புகள் இரண்டிலும் சோதிக்கவும். RTL சூழல்களை உருவகப்படுத்த உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தலாம்.
  4. படிப்படியாக இயற்பியல் பண்புகளை மாற்றுதல்: லாஜிக்கல் பண்புகள் சரியாக வேலை செய்கின்றன என்பதில் நீங்கள் நம்பிக்கையுடன் இருந்தால், அசல் இயற்பியல் பண்புகளை படிப்படியாக அகற்றவும்.
  5. CSS மாறிகளைப் பயன்படுத்துங்கள்: பொதுவான இடைவெளி அல்லது அளவு மதிப்புகளை வரையறுக்க CSS மாறிகளைப் பயன்படுத்துவதைக் கவனியுங்கள், இது உங்கள் ஸ்டைல்களை நிர்வகிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது. உதாரணமாக: :root { --spacing-inline: 1em; } .element { margin-inline-start: var(--spacing-inline); margin-inline-end: var(--spacing-inline); }

உலாவி ஆதரவு

CSS லாஜிக்கல் பண்புகள் Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் சிறந்த உலாவி ஆதரவைக் கொண்டுள்ளன. இருப்பினும், பழைய உலாவிகள் அவற்றை பூர்வீகமாக ஆதரிக்காமல் இருக்கலாம். பழைய உலாவிகளுடன் இணக்கத்தன்மையை உறுதிப்படுத்த, நீங்கள் css-logical-props போன்ற ஒரு பாலிஃபில் நூலகத்தைப் பயன்படுத்தலாம்.

மேம்பட்ட நுட்பங்கள்

லாஜிக்கல் பண்புகளை CSS கிரிட் மற்றும் ஃப்ளெக்ஸ்பாக்ஸுடன் இணைத்தல்

லாஜிக்கல் பண்புகள் CSS கிரிட் மற்றும் ஃப்ளெக்ஸ்பாக்ஸுடன் தடையின்றி செயல்படுகின்றன, இது வெவ்வேறு எழுத்து முறைகளுக்கு ஏற்றவாறு சிக்கலான மற்றும் பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது. உதாரணமாக, ஃப்ளெக்ஸ்பாக்ஸில் justify-content: start மற்றும் justify-content: end ஐப் பயன்படுத்தி உருப்படிகளை கண்டெய்னரின் லாஜிக்கல் ஆரம்பம் மற்றும் இறுதிக்கு சீரமைக்கலாம்.

தனிப்பயன் பண்புகளுடன் (CSS மாறிகள்) லாஜிக்கல் பண்புகளைப் பயன்படுத்துதல்

மேலே காட்டப்பட்டுள்ளபடி, CSS மாறிகள் உங்கள் லாஜிக்கல் பண்பு குறியீட்டை இன்னும் பராமரிக்கக்கூடியதாகவும் படிக்கக்கூடியதாகவும் மாற்றும். பொதுவான இடைவெளி மற்றும் அளவு மதிப்புகளை மாறிகளாக வரையறுத்து, அவற்றை உங்கள் ஸ்டைல்ஷீட் முழுவதும் மீண்டும் பயன்படுத்தவும்.

ஜாவாஸ்கிரிப்ட் மூலம் எழுதும் முறை மற்றும் திசையைக் கண்டறிதல்

சில சந்தர்ப்பங்களில், நீங்கள் ஜாவாஸ்கிரிப்ட் பயன்படுத்தி தற்போதைய எழுதும் முறை அல்லது திசையைக் கண்டறிய வேண்டியிருக்கலாம். writing-mode மற்றும் direction பண்புகளின் மதிப்புகளைப் பெற நீங்கள் getComputedStyle() முறையைப் பயன்படுத்தலாம்.

சிறந்த நடைமுறைகள்

முடிவுரை

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

மேலும் ஆதாரங்கள்