அனைத்து மொழிகள் மற்றும் சாதனங்களில் மேம்பட்ட வாசிப்புத்திறன் மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பிற்கான CSS உரை மடித்தல் நுட்பங்களில் தேர்ச்சி பெறுங்கள். word-break, overflow-wrap, hyphens மற்றும் பலவற்றைப் பற்றி அறிக.
CSS உரை மடித்தல்: உலகளாவிய வலை வடிவமைப்பிற்கான மேம்பட்ட உரை ஓட்டக் கட்டுப்பாடு
வலை மேம்பாட்டு உலகில், வெவ்வேறு திரை அளவுகள் மற்றும் மொழிகளில் உரை தெளிவாகவும் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் இருப்பதை உறுதி செய்வது மிக முக்கியம். CSS உரை மடித்தல் பண்புகள், ஒரு கொள்கலனுக்குள் உரை எவ்வாறு பாய்கிறது என்பதைக் கட்டுப்படுத்த சக்திவாய்ந்த கருவிகளை வழங்குகின்றன, இது வழிதல் (overflow) மற்றும் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்துகிறது. இந்த விரிவான வழிகாட்டி மேம்பட்ட உரை ஓட்டக் கட்டுப்பாட்டு நுட்பங்களை ஆராயும், word-break, overflow-wrap (முன்னர் word-wrap), hyphens மற்றும் பிற தொடர்புடைய பண்புகளில் கவனம் செலுத்தும். உங்கள் பார்வையாளர்கள் எங்கிருந்தாலும், உங்கள் வலைத்தளம் சிறப்பாகத் தோன்றுவதை உறுதிசெய்ய, நடைமுறை எடுத்துக்காட்டுகளை ஆராய்ந்து, சர்வதேசமயமாக்கலின் நுணுக்கங்களைக் கருத்தில் கொள்வோம்.
அடிப்படைகளைப் புரிந்துகொள்வது: உரை மடித்தல் ஏன் முக்கியமானது
சரியான உரை மடித்தல் இல்லாமல், நீண்ட வார்த்தைகள் அல்லது URLகள் உங்கள் வலைத்தளத்தின் அமைப்பை உடைத்து, கிடைமட்ட ஸ்க்ரோலிங் அல்லது அழகற்ற வழிதலுக்கு காரணமாகலாம். இது குறிப்பாக குறைந்த திரை இடம் கொண்ட மொபைல் சாதனங்களில் சிக்கலாக உள்ளது. மேலும், வெவ்வேறு மொழிகள் வெவ்வேறு வார்த்தை உடைப்பு விதிகளைக் கொண்டுள்ளன, இது சர்வதேசமயமாக்கலை கவனமாக பரிசீலிக்க வேண்டிய அவசியத்தை ஏற்படுத்துகிறது.
ஜப்பானிய உரையைக் காட்டும் ஒரு வலைத்தளத்தைக் கவனியுங்கள். ஜப்பானிய மொழியில் பாரம்பரியமாக வார்த்தைகளுக்கு இடையில் இடைவெளிகள் பயன்படுத்தப்படுவதில்லை, எனவே வெளிப்படையான உரை மடித்தல் இல்லாமல், நீண்ட வாக்கியங்கள் அவற்றின் கொள்கலன்களிலிருந்து வழிந்துவிடும். இதேபோல், ஜெர்மன் போன்ற மொழிகளில் பெரும்பாலும் மிக நீண்ட கூட்டுச் சொற்கள் உள்ளன, இதுவும் தளவமைப்பு சிக்கல்களை ஏற்படுத்தலாம்.
முக்கிய பண்புகள்: word-break, overflow-wrap, மற்றும் hyphens
word-break: வார்த்தைகளுக்குள் உடைப்பு புள்ளிகளைக் கட்டுப்படுத்துதல்
word-break பண்பு, ஒரு வரியின் முடிவை அடையும்போது வார்த்தைகள் எவ்வாறு உடைக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது. இது பல மதிப்புகளை வழங்குகிறது:
normal: இயல்புநிலை நடத்தை, அனுமதிக்கப்பட்ட உடைப்பு புள்ளிகளில் (எ.கா., இடைவெளிகள், ஹைபன்கள்) வார்த்தைகளை உடைத்தல்.break-all: சாதாரணமாக அனுமதிக்கப்படாத இடத்திலும், எந்த எழுத்திலும் வார்த்தைகளை உடைக்கும். இடைவெளிகள் இல்லாத மொழிகளுக்கும் அல்லது மிக நீண்ட வார்த்தைகளைக் கையாளும்போதும் இது பயனுள்ளதாக இருக்கும்.keep-all: வார்த்தை உடைப்புகளை முற்றிலுமாகத் தடுக்கிறது. சீன, ஜப்பானிய, மற்றும் கொரிய (CJK) போன்ற மொழிகளுக்கு இது பயனுள்ளதாக இருக்கும், அங்கு வார்த்தைகள் பெரும்பாலும் இடைவெளிகள் இல்லாமல் எழுதப்படுகின்றன.break-word(வழக்கற்றுப் போனது, ஆனால் பெரும்பாலும் `overflow-wrap: anywhere` க்கு மாற்றாகப் பயன்படுத்தப்படுகிறது): முதலில் சாதாரணமாக உடைக்க முடியாத வார்த்தைகளை உடைக்க அனுமதித்தது, இப்போது `overflow-wrap: anywhere` மூலம் சிறப்பாகக் கையாளப்படுகிறது.
எடுத்துக்காட்டு:
.break-all {
word-break: break-all;
}
.keep-all {
word-break: keep-all;
}
நடைமுறைப் பயன்பாடு: நீண்ட URLகள் அல்லது கோப்புப் பெயர்களைக் கையாளுதல். "https://www.example.com/very/long/path/to/a/resource/that/needs/to/be/displayed/without/overflowing/the/container" போன்ற ஒரு நீண்ட URL ஐக் காண்பிப்பதை கற்பனை செய்து பாருங்கள். word-break: break-all; ஐப் பயன்படுத்துவது, ஒரு வார்த்தையின் நடுவில் உடைத்தாலும், அந்த URL ஐ மடிக்க வைக்கும்.
சர்வதேசமயமாக்கல் பரிசீலனைகள்: CJK மொழிகளில் வார்த்தைகள் தவறாக உடைக்கப்படுவதைத் தடுக்க word-break: keep-all; முக்கியமானது.
overflow-wrap (முன்னர் word-wrap): வழிதலைத் தடுத்தல்
overflow-wrap பண்பு (முதலில் word-wrap என்று பெயரிடப்பட்டது, இது இன்னும் பரவலாக ஆதரிக்கப்படுகிறது) ஒரு பிரிக்க முடியாத சரம் அதன் கொள்கலன் பெட்டிக்குள் பொருந்தாத அளவுக்கு நீளமாக இருக்கும்போது, வழிதலைத் தடுக்க உலாவி வார்த்தைகளை உடைக்க முடியுமா என்பதைக் குறிப்பிடுகிறது.
normal: இயல்புநிலை நடத்தை. வார்த்தைகள் அவற்றின் சாதாரண உடைப்பு புள்ளிகளில் மட்டுமே உடைக்கப்படுகின்றன.break-word: ஒரு வரியில் பொருந்தாத அளவுக்கு நீளமாக இருந்தால், வார்த்தைக்குள் உடைப்பு புள்ளிகள் இல்லாவிட்டாலும் வார்த்தைகளை உடைக்கும். இது இப்போது வழக்கற்றுப் போய்விட்டது மற்றும் `anywhere` க்கு முன்னுரிமை அளிக்கப்படுகிறது.anywhere: (பரிந்துரைக்கப்படுகிறது) வரியில் வேறு ஏற்றுக்கொள்ளக்கூடிய உடைப்பு புள்ளிகள் இல்லை என்றால், தன்னிச்சையான புள்ளிகளில் வார்த்தைகளை உடைக்க அனுமதிக்கிறது. இது `break-word` ஐ விட சக்தி வாய்ந்தது, ஏனெனில் `word-break` `normal` என அமைக்கப்பட்டிருந்தாலும் இது பொருந்தும்.
எடுத்துக்காட்டு:
.overflow-wrap {
overflow-wrap: anywhere;
}
நடைமுறைப் பயன்பாடு: தோராயமாக உருவாக்கப்பட்ட விசைகள் அல்லது அடையாளங்காட்டிகள் போன்ற மிக நீண்ட எழுத்துச் சரங்கள் அவற்றின் கொள்கலன்களிலிருந்து வழிந்து செல்வதைத் தடுத்தல். "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0" போன்ற ஒரு தனித்துவமான அடையாளங்காட்டியைக் காட்டும் ஒரு பயனர் இடைமுகத்தைக் கவனியுங்கள். overflow-wrap: anywhere; ஐப் பயன்படுத்துவது அது சரியான முறையில் மடிக்கப்படுவதை உறுதி செய்கிறது.
சர்வதேசமயமாக்கல் பரிசீலனைகள்: பல்வேறு மொழிகளில் வழிதலைத் தடுக்க இது பயனுள்ளதாக இருந்தாலும், வாசிப்புத்திறனைக் கவனத்தில் கொள்ளுங்கள். வார்த்தைகளை அதிகமாக உடைப்பது, குறிப்பாக சிக்கலான உருவவியல் கொண்ட மொழிகளில் புரிந்துகொள்ளுதலைத் தடுக்கலாம்.
hyphens: சிறந்த வாசிப்புத்திறனுக்காக ஹைபனேஷன் சேர்த்தல்
hyphens பண்பு, வார்த்தைகள் அடுத்த வரிக்கு மடிக்கும்போது ஹைபனேட் செய்யப்பட வேண்டுமா என்பதைக் கட்டுப்படுத்துகிறது. இது உரையின் காட்சி முறையீடு மற்றும் வாசிப்புத்திறனை கணிசமாக மேம்படுத்தும்.
none: இயல்புநிலை நடத்தை. ஹைபனேஷன் முடக்கப்பட்டுள்ளது.manual: மென்மையான ஹைபன் எழுத்தை (­) பயன்படுத்தி கைமுறையாகக் குறிப்பிட்ட இடங்களில் மட்டுமே ஹைபனேஷன் நிகழ்கிறது.auto: மொழி சார்ந்த விதிகளின் அடிப்படையில் உலாவி தானாகவே வார்த்தைகளை ஹைபனேட் செய்கிறது.
எடுத்துக்காட்டு:
.hyphens-auto {
hyphens: auto;
}
நடைமுறைப் பயன்பாடு: சரிசெய்யப்பட்ட உரையின் தோற்றத்தை மேம்படுத்துதல். ஹைபனேஷன் இடைவெளியை இன்னும் சமமாக விநியோகிக்க உதவுகிறது, வார்த்தைகளுக்கு இடையிலான இடைவெளிகளைக் குறைத்து, ஒரு தூய்மையான, தொழில்முறை தோற்றத்தை உருவாக்குகிறது. இது குறிப்பாக நீண்ட கட்டுரைகள் அல்லது வலைப்பதிவு இடுகைகளில் பயனுள்ளதாக இருக்கும்.
சர்வதேசமயமாக்கல் பரிசீலனைகள்: hyphens: auto; பண்பு, மொழி சார்ந்த ஹைபனேஷன் விதிகளைப் பற்றிய உலாவியின் அறிவை நம்பியுள்ளது. உங்கள் HTML இல் lang பண்பைப் பயன்படுத்தி உரையின் மொழியைக் குறிப்பிட வேண்டும்.
எடுத்துக்காட்டு:
<p lang="en-US" class="hyphens-auto">This is a long sentence that demonstrates automatic hyphenation.</p>
<p lang="de" class="hyphens-auto">Dies ist ein langer Satz, der die automatische Silbentrennung demonstriert.</p>
முக்கிய குறிப்பு: hyphens: auto; சரியாக வேலை செய்ய, உலாவிக்கு உரையின் மொழி தெரிய வேண்டும். HTML குறிச்சொல்லில் (எ.கா., <html lang="en"> அல்லது <p lang="fr">) lang பண்பைப் பயன்படுத்தி மொழியைக் குறிப்பிடவும். மேலும், உங்கள் சேவையகம் சரியான Content-Language HTTP தலைப்பை அனுப்புகிறது என்பதை உறுதிப்படுத்தவும். பல CMS அமைப்புகள் உள்ளடக்க மொழியின் அடிப்படையில் இந்த பண்புகள் மற்றும் தலைப்புகளை தானாக அமைக்க செருகுநிரல்களை வழங்குகின்றன.
சிறந்த உரை ஓட்டத்திற்கான பண்புகளை இணைத்தல்
துல்லியமான உரை ஓட்டக் கட்டுப்பாட்டை அடைய இந்த பண்புகளை இணைக்கலாம். எடுத்துக்காட்டாக, தீவிரமான சந்தர்ப்பங்களில் வழிதலைத் தடுக்க overflow-wrap: anywhere; ஐப் பயன்படுத்தலாம், அதே நேரத்தில் நிலையான உரைப் பத்திகளில் சிறந்த வாசிப்புத்திறனுக்காக hyphens: auto; ஐப் பயன்படுத்தலாம்.
எடுத்துக்காட்டு:
.combined-text {
overflow-wrap: anywhere;
hyphens: auto;
lang: en-US; /*Important for hyphenation*/
}
பிற தொடர்புடைய CSS பண்புகள்
white-space: வெற்றுவெளி மற்றும் வரி முறிவுகளைக் கட்டுப்படுத்துதல்
white-space பண்பு, ஒரு உறுப்புக்குள் வெற்றுவெளி மற்றும் வரி முறிவுகள் எவ்வாறு கையாளப்படுகின்றன என்பதைக் கட்டுப்படுத்துகிறது.
normal: வெற்றுவெளிகளின் தொடர்ச்சிகளை ஒரே இடைவெளியாக சுருக்கி, தேவைக்கேற்ப வரிகளை உடைக்கிறது.nowrap: வெற்றுவெளியை சுருக்குகிறது ஆனால் வரி முறிவுகளைத் தடுக்கிறது. உரை பொருந்தவில்லை என்றால் அது வழிந்துவிடும்.pre: HTML மூலத்தில் தோன்றுவது போலவே வெற்றுவெளி மற்றும் வரி முறிவுகளை அப்படியே பாதுகாக்கிறது.pre-wrap: வெற்றுவெளியைப் பாதுகாக்கிறது ஆனால் தேவைப்படும்போது வரி முறிவுகளை அனுமதிக்கிறது.pre-line: வெற்றுவெளியைச் சுருக்குகிறது ஆனால் வரி முறிவுகளைப் பாதுகாக்கிறது.break-spaces: `pre-wrap` போலவே செயல்படுகிறது, ஆனால் இடைவெளிகளின் தொடர்ச்சிகளை பல வரிகளாக உடைத்து, குறைந்த இடத்தை எடுத்துக்கொள்கிறது.
நடைமுறைப் பயன்பாடு: குறியீட்டுத் துணுக்குகளைக் காண்பித்தல். white-space: pre; அல்லது white-space: pre-wrap; ஐப் பயன்படுத்துவது குறியீட்டின் வடிவமைப்பு பாதுகாக்கப்படுவதை உறுதி செய்யும்.
line-break: வரி முறிவின் மீது நுணுக்கமான கட்டுப்பாடு (CJK மொழிகள்)
line-break பண்பு CJK அல்லாத (சீன, ஜப்பானிய, கொரிய) உரையை உடைப்பதற்கான கடுமையான விதிகளைக் குறிப்பிடுகிறது. இந்த பண்பு குறைவாகவே பயன்படுத்தப்படுகிறது, ஆனால் குறிப்பிட்ட சூழ்நிலைகளில் உதவியாக இருக்கும். இது CJK உரைக்குள் வரி முறிவுகள் எவ்வாறு நிகழ்கின்றன என்பதைக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது.
auto: உலாவி, உரையின் மொழியை அடிப்படையாகக் கொண்டு, அதன் சொந்த வரி முறிவு விதிகளைப் பயன்படுத்துகிறது.loose: வரி முறிவு விதிகளின் குறைந்த கட்டுப்பாடான தொகுப்பைப் பயன்படுத்துகிறது.normal: மிகவும் பொதுவான வரி முறிவு விதிகளைப் பயன்படுத்துகிறது.strict: மிகவும் கட்டுப்பாடான வரி முறிவு விதிகளைப் பயன்படுத்துகிறது.
word-spacing: வார்த்தைகளுக்கு இடையிலான இடைவெளியை சரிசெய்தல்
word-spacing பண்பு, வார்த்தைகளுக்கு இடையிலான இடைவெளியை அதிகரிக்க அல்லது குறைக்க உங்களை அனுமதிக்கிறது. இது சில எழுத்துருக்கள் அல்லது தளவமைப்புகளில் வாசிப்புத்திறனை மேம்படுத்த பயனுள்ளதாக இருக்கும்.
எடுத்துக்காட்டு:
.increased-word-spacing {
word-spacing: 0.2em;
}
உலகளாவிய உரை மடித்தலுக்கான சிறந்த நடைமுறைகள்
- மொழியை குறிப்பிடவும்: உரையின் மொழியைக் குறிக்க உங்கள் HTML இல் எப்போதும்
langபண்பைப் பயன்படுத்தவும். இது ஹைபனேஷன் மற்றும் பிற மொழி சார்ந்த உரை செயலாக்கத்திற்கு முக்கியமானது. - முழுமையாக சோதிக்கவும்: எல்லா சூழ்நிலைகளிலும் உரை மடித்தல் சரியாக வேலை செய்கிறதா என்பதை உறுதிப்படுத்த, உங்கள் வலைத்தளத்தை வெவ்வேறு மொழிகள் மற்றும் திரை அளவுகளுடன் சோதிக்கவும்.
- வாசிப்புத்திறனைக் கருத்தில் கொள்ளுங்கள்: வழிதலைத் தடுப்பது முக்கியம் என்றாலும், வாசிப்புத்திறனைத் தடுக்கக்கூடிய அதிகப்படியான வார்த்தை உடைப்புகளைத் தவிர்க்கவும்.
- CSS ரீசெட்டைப் பயன்படுத்தவும்: வெவ்வேறு உலாவிகளில் நிலையான ஸ்டைலிங்கை உறுதிசெய்ய CSS ரீசெட்டை (எ.கா., Normalize.css அல்லது Reset.css) செயல்படுத்தவும்.
- ஒரு கட்டமைப்பைப் பயன்படுத்தவும்: பதிலளிக்கக்கூடிய அச்சுக்கலை மற்றும் உரை மடித்தலுக்கான உள்ளமைக்கப்பட்ட ஆதரவை வழங்கும் CSS கட்டமைப்பைப் (எ.கா., Bootstrap, Tailwind CSS, Materialize) பயன்படுத்தவும்.
- செயல்திறனைக் கண்காணிக்கவும்: சிக்கலான உரை மடித்தல் விதிகள் செயல்திறனை பாதிக்கலாம், குறிப்பாக பழைய சாதனங்களில். செயல்திறன் சிக்கல்களைக் கண்டறிந்து சரிசெய்ய உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.
- CSS கையாள முடிந்தால் உரை மடித்தல் சிக்கல்களைத் தீர்க்க ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதைத் தவிர்க்கவும்: CSS தீர்வுகள் பொதுவாக அதிக செயல்திறன் மற்றும் சொற்பொருள் சார்ந்தவை.
உலாவி இணக்கத்தன்மை
இந்த வழிகாட்டியில் விவாதிக்கப்பட்ட பண்புகள் நவீன உலாவிகளால் பரவலாக ஆதரிக்கப்படுகின்றன. இருப்பினும், குறிப்பாக இன்டர்நெட் எக்ஸ்ப்ளோரரின் பழைய பதிப்புகளுடன் சாத்தியமான இணக்கத்தன்மை சிக்கல்கள் குறித்து எச்சரிக்கையாக இருப்பது அவசியம்.
word-break: அனைத்து முக்கிய உலாவிகளாலும் ஆதரிக்கப்படுகிறது.overflow-wrap(word-wrap): அனைத்து முக்கிய உலாவிகளாலும் ஆதரிக்கப்படுகிறது.overflow-wrapஎன்பது நிலையான பெயர், ஆனால்word-wrapஇன்னும் பின்னோக்கிய இணக்கத்தன்மைக்காக பரவலாகப் பயன்படுத்தப்படுகிறது.hyphens: அனைத்து முக்கிய உலாவிகளாலும் ஆதரிக்கப்படுகிறது, ஆனால் பழைய பதிப்புகளுக்கு விற்பனையாளர் முன்னொட்டுகள் (-webkit-hyphens,-moz-hyphens) தேவைப்படலாம். சரியான ஹைபனேஷனுக்கு `lang` பண்பையும் அமைக்க நினைவில் கொள்ளுங்கள்.
ஒவ்வொரு பண்புக்கும் குறிப்பிட்ட உலாவி இணக்கத்தன்மையை சரிபார்க்க Can I use... போன்ற ஒரு கருவியைப் பயன்படுத்தவும்.
முடிவுரை
CSS உரை மடித்தல் நுட்பங்களில் தேர்ச்சி பெறுவது, உலகளாவிய பார்வையாளர்களுக்காக பதிலளிக்கக்கூடிய, படிக்கக்கூடிய மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வலைத்தளங்களை உருவாக்குவதற்கு அவசியமானது. word-break, overflow-wrap, மற்றும் hyphens ஆகியவற்றின் பண்புகளைப் புரிந்துகொண்டு, சர்வதேசமயமாக்கலின் நுணுக்கங்களைக் கருத்தில் கொள்வதன் மூலம், உங்கள் வலைத்தளத்தின் உரை எல்லா சாதனங்கள் மற்றும் மொழிகளிலும் தடையின்றி பாய்வதை உறுதிசெய்யலாம். செயல்திறன் மற்றும் வாசிப்புத்திறனை மேம்படுத்த உங்கள் வலைத்தளத்தை முழுமையாக சோதித்து சிறந்த நடைமுறைகளைப் பயன்படுத்த நினைவில் கொள்ளுங்கள். உரை மடித்தல், சர்வதேச வலை வடிவமைப்பின் அனைத்து அம்சங்களையும் போலவே, கலாச்சார உணர்திறன் மற்றும் முழுமையான சோதனை தேவை. இந்த விவரங்களுக்கு கவனம் செலுத்துவதன் மூலம், அனைவருக்கும் சிறந்த பயனர் அனுபவத்தை உருவாக்குவீர்கள்.
இது ஒரு தொடக்கப் புள்ளி மட்டுமே. CSS உரை கட்டுப்பாட்டின் உலகம் பரந்தது மற்றும் தொடர்ந்து வளர்ந்து வருகிறது. தொடர்ந்து பரிசோதனை செய்யுங்கள், தொடர்ந்து கற்றுக்கொள்ளுங்கள், மேலும் உலகெங்கிலும் உள்ள பயனர்களுக்கு சிறந்த வலை அனுபவங்களை உருவாக்குங்கள்!