தமிழ்

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

CSS லாஜிக்கல் பாக்ஸ் மாடல்: ஒரு உலகளாவிய வலைக்காக எழுதும் முறை-விழிப்புணர்வு தளவமைப்புகளை உருவாக்குதல்

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

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

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

மறுபுறம், லாஜிக்கல் பாக்ஸ் மாடல், எழுதும் முறை மற்றும் உரை திசையைப் பொறுத்து இருக்கும் லாஜிக்கல் பண்புகளைப் பயன்படுத்துகிறது. margin-left என்பதற்குப் பதிலாக, நீங்கள் margin-inline-start ஐப் பயன்படுத்துவீர்கள். உலாவி தற்போதைய எழுதும் முறை மற்றும் திசையின் அடிப்படையில் இந்தப் பண்பை தானாகவே சரியாக விளக்குகிறது. இது பயன்படுத்தப்படும் மொழி அல்லது ஸ்கிரிப்டைப் பொருட்படுத்தாமல், உறுப்பின் பொருத்தமான பக்கத்தில் மார்ஜின் தோன்றுவதை உறுதி செய்கிறது.

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

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

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

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

இயல்பாக, பெரும்பாலான உலாவிகள் writing-mode: horizontal-tb ஐப் பயன்படுத்துகின்றன.

உரை திசை

direction CSS பண்பு, இன்லைன் உள்ளடக்கம் பாயும் திசையைக் குறிப்பிடுகிறது. இது இரண்டு மதிப்புகளைக் கொண்டிருக்கலாம்:

direction பண்பு உரையின் *திசை* மற்றும் இன்லைன் உறுப்புகளை மட்டுமே பாதிக்கிறது, ஒட்டுமொத்த தளவமைப்பை அல்ல என்பதை கவனத்தில் கொள்ள வேண்டும். writing-mode பண்பு தான் முதன்மையாக தளவமைப்பு திசையை தீர்மானிக்கிறது.

லாஜிக்கல் பண்புகள்: ஒரு விரிவான கண்ணோட்டம்

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

மார்ஜின்கள்

பேடிங்

பார்டர்கள்

ஆஃப்செட் பண்புகள்

அகலம் மற்றும் உயரம்

நடைமுறை எடுத்துக்காட்டுகள்: லாஜிக்கல் பண்புகளை செயல்படுத்துதல்

எழுதும் முறை-விழிப்புணர்வு தளவமைப்புகளை உருவாக்க லாஜிக்கல் பண்புகளை எவ்வாறு பயன்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: ஒரு எளிய நேவிகேஷன் பார்

இடதுபுறத்தில் ஒரு லோகோவும், வலதுபுறத்தில் நேவிகேஷன் இணைப்புகளும் கொண்ட ஒரு நேவிகேஷன் பாரைக் கவனியுங்கள். இயற்பியல் பண்புகளைப் பயன்படுத்தி, இடைவெளியை உருவாக்க லோகோவில் margin-left மற்றும் நேவிகேஷன் இணைப்புகளில் margin-right ஐப் பயன்படுத்தலாம். இருப்பினும், இது RTL மொழிகளில் சரியாக வேலை செய்யாது.

லாஜிக்கல் பண்புகளைப் பயன்படுத்தி அதே தளவமைப்பை எவ்வாறு அடையலாம் என்பது இங்கே:

```html ``` ```css nav { display: flex; justify-content: space-between; padding-inline-start: 1rem; /* லாஜிக்கல் பண்பைப் பயன்படுத்தவும் */ padding-inline-end: 1rem; /* லாஜிக்கல் பண்பைப் பயன்படுத்தவும் */ } .logo { margin-inline-end: auto; /* லோகோவை ஆரம்பத்திற்கும், இணைப்புகளை முடிவிற்கும் தள்ளவும் */ } ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; } ```

இந்த எடுத்துக்காட்டில், நேவிகேஷனின் பேடிங்கிற்கும் லோகோவின் ஆட்டோ மார்ஜினுக்கும் margin-left மற்றும் margin-rightmargin-inline-start மற்றும் margin-inline-end உடன் மாற்றியுள்ளோம். லோகோவின் margin-inline-end இல் உள்ள `auto` மதிப்பு, LTR இல் இடதுபுறத்திலும் RTL இல் வலதுபுறத்திலும் உள்ள இடத்தை நிரப்பச் செய்கிறது, இது நேவிகேஷனை முடிவிற்கு திறம்பட தள்ளுகிறது.

இது உரையின் திசையைப் பொருட்படுத்தாமல், லோகோ எப்போதும் நேவிகேஷன் பாரின் ஆரம்பப் பக்கத்திலும், நேவிகேஷன் இணைப்புகள் இறுதிப் பக்கத்திலும் தோன்றுவதை உறுதி செய்கிறது.

எடுத்துக்காட்டு 2: ஒரு கார்டு கூறுகளை வடிவமைத்தல்

ஒரு தலைப்பு, விளக்கம் மற்றும் ஒரு படத்துடன் ஒரு கார்டு கூறு உங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம். நீங்கள் உள்ளடக்கத்தைச் சுற்றி பேடிங் சேர்க்கவும் மற்றும் பொருத்தமான பக்கங்களில் ஒரு பார்டரை சேர்க்கவும் விரும்புகிறீர்கள்.

```html
Card Image

Card Title

This is a brief description of the card content.

``` ```css .card { border: 1px solid #ccc; margin-block-end: 1em; } .card-content { padding-block-start: 1rem; padding-block-end: 1rem; padding-inline-start: 1.5rem; padding-inline-end: 1.5rem; } ```

இங்கே, கார்டு உள்ளடக்கத்தைச் சுற்றி பேடிங் சேர்க்க padding-block-start, padding-block-end, padding-inline-start, மற்றும் padding-inline-end ஐப் பயன்படுத்தியுள்ளோம். இது LTR மற்றும் RTL தளவமைப்புகளில் பேடிங் சரியாகப் பயன்படுத்தப்படுவதை உறுதி செய்கிறது.

எடுத்துக்காட்டு 3: செங்குத்து எழுதும் முறைகளைக் கையாளுதல்

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

```html

This text is displayed vertically.

``` ```css .vertical-text { writing-mode: vertical-rl; /* அல்லது vertical-lr */ block-size: 200px; /* உரை கொள்கலனின் உயரத்தைக் கட்டுப்படுத்தவும் */ border-inline-start: 2px solid blue; /* vertical-rl இல் மேல் பார்டர் */ border-inline-end: 2px solid green; /* vertical-rl இல் கீழ் பார்டர் */ padding-block-start: 10px; /* vertical-rl இல் இடது பேடிங் */ padding-block-end: 10px; /* vertical-rl இல் வலது பேடிங் */ } .vertical-text p { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } ```

இந்த எடுத்துக்காட்டில், writing-modevertical-rl ஆக அமைத்துள்ளோம், இது உரையை வலமிருந்து இடமாக செங்குத்தாக வழங்குகிறது. ஒட்டுமொத்த உயரத்தை வரையறுக்க `block-size` ஐப் பயன்படுத்துகிறோம். லாஜிக்கல் பண்புகளைப் பயன்படுத்தி பார்டர்கள் மற்றும் பேடிங்கை நாங்கள் பயன்படுத்துகிறோம், அவை செங்குத்து சூழலில் மீண்டும் மேப் செய்யப்படுகின்றன. vertical-rl இல், border-inline-start மேல் பார்டராகவும், border-inline-end கீழ் பார்டராகவும், padding-block-start இடது பேடிங்காகவும், padding-block-end வலது பேடிங்காகவும் மாறும்.

ஃப்ளெக்ஸ்பாக்ஸ் மற்றும் கிரிட் தளவமைப்புகளுடன் வேலை செய்தல்

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

ஃப்ளெக்ஸ்பாக்ஸ்

ஃப்ளெக்ஸ்பாக்ஸில், justify-content, align-items, மற்றும் gap போன்ற பண்புகள், நெகிழ்வான மற்றும் எழுதும் முறை-விழிப்புணர்வு தளவமைப்புகளை உருவாக்க மார்ஜின்கள் மற்றும் பேடிங்கிற்கான லாஜிக்கல் பண்புகளுடன் இணைந்து பயன்படுத்தப்பட வேண்டும். குறிப்பாக flex-direction: row | row-reverse; ஐப் பயன்படுத்தும் போது, `start` மற்றும் `end` பண்புகள் சூழல் விழிப்புடன் மாறி, பொதுவாக `left` மற்றும் `right` ஐ விட விரும்பத்தக்கவை.

எடுத்துக்காட்டாக, ஒரு ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலனில் உள்ள பொருட்களின் வரிசையைக் கவனியுங்கள். பொருட்களை சமமாக விநியோகிக்க, நீங்கள் justify-content: space-between ஐப் பயன்படுத்தலாம். ஒரு RTL தளவமைப்பில், பொருட்கள் இன்னும் சமமாக விநியோகிக்கப்படும், ஆனால் பொருட்களின் வரிசை தலைகீழாக மாற்றப்படும்.

கிரிட் தளவமைப்பு

கிரிட் தளவமைப்பு சிக்கலான தளவமைப்புகளை உருவாக்குவதற்கு இன்னும் சக்திவாய்ந்த கருவிகளை வழங்குகிறது. பெயரிடப்பட்ட கிரிட் கோடுகளுடன் இணைந்தால் லாஜிக்கல் பண்புகள் குறிப்பாக பயனுள்ளதாக இருக்கும். கிரிட் கோடுகளை எண்ணால் குறிப்பிடுவதற்குப் பதிலாக, "start" மற்றும் "end" போன்ற லாஜிக்கல் சொற்களைப் பயன்படுத்தி அவற்றை நீங்கள் பெயரிடலாம், பின்னர் எழுதும் முறையைப் பொறுத்து அவற்றின் இயற்பியல் இடத்தைத் வரையறுக்கலாம்.

எடுத்துக்காட்டாக, "inline-start", "inline-end", "block-start", மற்றும் "block-end" போன்ற பெயரிடப்பட்ட கோடுகளுடன் ஒரு கிரிட்டை நீங்கள் வரையறுத்து, பின்னர் இந்த பெயர்களைப் பயன்படுத்தி கிரிட்டிற்குள் உறுப்புகளை நிலைநிறுத்தலாம். இது வெவ்வேறு எழுதும் முறைகள் மற்றும் உரை திசைகளுக்குப் பொருந்தக்கூடிய தளவமைப்புகளை உருவாக்குவதை எளிதாக்குகிறது.

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

CSS லாஜிக்கல் பாக்ஸ் மாடலை ஏற்றுக்கொள்வதில் பல குறிப்பிடத்தக்க நன்மைகள் உள்ளன:

கருத்தில் கொள்ள வேண்டியவை மற்றும் சிறந்த நடைமுறைகள்

லாஜிக்கல் பாக்ஸ் மாடல் பல நன்மைகளை வழங்கினாலும், அதைச் செயல்படுத்தும்போது பின்வருவனவற்றைக் கருத்தில் கொள்வது அவசியம்:

கருவிகள் மற்றும் வளங்கள்

CSS லாஜிக்கல் பாக்ஸ் மாடல் பற்றி மேலும் அறிய சில பயனுள்ள கருவிகள் மற்றும் வளங்கள் இங்கே:

முடிவுரை

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

CSS லாஜிக்கல் பாக்ஸ் மாடல்: ஒரு உலகளாவிய வலைக்காக எழுதும் முறை-விழிப்புணர்வு தளவமைப்புகளை உருவாக்குதல் | MLOG