CSS கவுண்டர் ஸ்டைல் ஓவர்ஃப்ளோ கையாளுதல்: பெரிய எண்களைக் காண்பிக்கும் உத்திகளுக்கான ஒரு விரிவான வழிகாட்டி

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

CSS கவுண்டர்களைப் புரிந்துகொள்ளுதல்

ஓவர்ஃப்ளோ கையாளுதலில் மூழ்குவதற்கு முன், CSS கவுண்டர்களின் அடிப்படைகளை மதிப்பாய்வு செய்வோம்.

அடிப்படை கவுண்டர் பயன்பாடு

CSS கவுண்டர்களில் இரண்டு முக்கிய பண்புகள் உள்ளன: counter-reset மற்றும் counter-increment. counter-reset ஒரு கவுண்டரைத் துவக்குகிறது, அதே நேரத்தில் counter-increment அதன் மதிப்பை அதிகரிக்கிறது.

உதாரணம்:

            body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

            

              
                Copy
              
            
          

இந்தக் குறியீடு body உறுப்பில் "section" என்ற பெயரில் ஒரு கவுண்டரை மீட்டமைக்கிறது. ஒவ்வொரு h2 உறுப்பின் ::before சூடோ-எலிமென்ட் பின்னர் கவுண்டரை அதிகரித்து, அதன் மதிப்பை "Section " என்ற முன்னொட்டுடன் காண்பிக்கிறது.

CSS கவுண்டர் ஸ்டைல்கள்

counter-style பண்பு கவுண்டர் மதிப்புகளின் வடிவமைப்பில் நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது. இது நிலையான தசம வடிவத்திற்கு அப்பால் தனிப்பயன் எண் அமைப்புகளை வரையறுக்க உங்களை அனுமதிக்கிறது.

உதாரணம்:

            @counter-style upper-roman {
  system: upper-roman;
  range: 1 infinity;
}

body {
  counter-reset: chapter;
}

h1::before {
  counter-increment: chapter;
  content: counter(chapter, upper-roman) ". ";
}

            

              
                Copy
              
            
          

இந்தக் குறியீடு பெரிய எழுத்து ரோமன் எண்களைப் பயன்படுத்தும் "upper-roman" என்ற தனிப்பயன் கவுண்டர் ஸ்டைலை வரையறுக்கிறது. இது பின்னர் இந்த ஸ்டைலை "chapter" கவுண்டரில் பயன்படுத்துகிறது, இது ஒவ்வொரு h1 உறுப்புக்கும் முன் காட்டப்படும்.

சிக்கல்: CSS கவுண்டர் ஓவர்ஃப்ளோ

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

பெரிய எண்களைக் காண்பிப்பதற்கான உத்திகள்

CSS கவுண்டர்களுடன் பெரிய எண்களை நேர்த்தியாகக் கையாள பல உத்திகள் இங்கே உள்ளன:

1. கவுண்டர் வரம்பைக் கட்டுப்படுத்துதல்

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

உதாரணம்:

            @counter-style my-style {
  system: extends decimal;
  range: 1 999;
  pad: 3 '0'; /* Add leading zeros */
  fallback: decimal; /* Fallback to default decimal */
}

body {
  counter-reset: item;
}

li::before {
  counter-increment: item;
  content: counter(item, my-style) ". ";
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், my-style கவுண்டர் ஸ்டைல் 1 முதல் 999 வரையிலான வரம்பிற்குள் கட்டுப்படுத்தப்பட்டுள்ளது. கவுண்டர் இந்த வரம்பை மீறினால், அது இயல்புநிலை தசம வடிவமைப்பிற்குத் திரும்பும் (`fallback: decimal;` விதியால் வரையறுக்கப்பட்டுள்ளது). `pad: 3 '0';` மூன்று இலக்கங்களின் சீரான காட்சியமைப்பை உறுதிசெய்ய முன்னணி பூஜ்ஜியங்களைச் சேர்க்கிறது.

எப்போது பயன்படுத்த வேண்டும்: சரியான எண் மதிப்பு முக்கியமல்ல, மற்றும் ஒரு வரையறுக்கப்பட்ட வரம்பிற்குள் வரிசைப்படுத்துதல் போதுமானதாக இருக்கும்போது.

2. அறிவியல் குறியீடு (Scientific Notation)

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

உதாரணம் (விளக்கத்திற்காக, JavaScript தேவை):

            /* CSS */
li::before {
  content: var(--scientific-notation);
}

/* JavaScript (Conceptual) */
const counterValue = 1234567890;
const exponent = Math.floor(Math.log10(counterValue));
const mantissa = counterValue / Math.pow(10, exponent);

const scientificNotation = `${mantissa.toFixed(2)}e${exponent}`;

// Set the CSS variable --scientific-notation
document.documentElement.style.setProperty('--scientific-notation', scientificNotation);

            

              
                Copy
              
            
          

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

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

3. சுருக்கப்பட்ட எண் வடிவமைப்பு (ஆயிரங்கள், மில்லியன்கள், பில்லியன்கள்)

ஒரு பொதுவான அணுகுமுறை, ஆயிரங்களுக்கு "K", மில்லியன்களுக்கு "M", மற்றும் பில்லியன்களுக்கு "B" போன்ற பின்னொட்டுகளைப் பயன்படுத்தி பெரிய எண்களைச் சுருக்குவதாகும். மீண்டும், கணக்கீடுகளைச் செய்து வெளியீட்டை வடிவமைக்க இதற்கு JavaScript தேவைப்படுகிறது.

உதாரணம் (விளக்கத்திற்காக, JavaScript தேவை):

            /* CSS */
li::before {
  content: var(--abbreviated-number);
}

/* JavaScript (Conceptual) */
function abbreviateNumber(number) {
  if (number >= 1000000000) {
    return (number / 1000000000).toFixed(1) + 'B';
  } else if (number >= 1000000) {
    return (number / 1000000).toFixed(1) + 'M';
  } else if (number >= 1000) {
    return (number / 1000).toFixed(1) + 'K';
  } else {
    return number.toString();
  }
}

const counterValue = 1234567;
const abbreviatedNumber = abbreviateNumber(counterValue);

// Set the CSS variable --abbreviated-number
document.documentElement.style.setProperty('--abbreviated-number', abbreviatedNumber);

            

              
                Copy
              
            
          

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

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

4. இலக்கங்களைக் குழுவாக்குதல்

பிரிப்பான்களைக் கொண்டு (எ.கா., காற்புள்ளிகள் அல்லது இடைவெளிகள்) இலக்கங்களைக் குழுவாக்குவது வாசிப்புத்திறனை மேம்படுத்துகிறது. CSS கவுண்டர் ஸ்டைல்கள் நேரடியாக இலக்கக் குழுவாக்கத்தை ஆதரிக்காது. CSS மாறிகளைப் பயன்படுத்தி எண்களைக் காண்பிப்பதற்கு முன் அவற்றை வடிவமைக்க JavaScript ஐப் பயன்படுத்தலாம்.

உதாரணம் (விளக்கத்திற்காக, JavaScript தேவை):

            /* CSS */
li::before {
  content: var(--formatted-number);
}

/* JavaScript (Conceptual) */
function formatNumberWithCommas(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

const counterValue = 1234567;
const formattedNumber = formatNumberWithCommas(counterValue);

// Set the CSS variable --formatted-number
document.documentElement.style.setProperty('--formatted-number', formattedNumber);

            

              
                Copy
              
            
          

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

பன்னாட்டுமயமாக்கல் பரிசீலனைகள்: வெவ்வேறு பகுதிகள் வெவ்வேறு பிரிப்பான்களைப் பயன்படுத்துகின்றன (எ.கா., காற்புள்ளிகள், புள்ளிகள், இடைவெளிகள்). வட்டார-அறிந்த எண் வடிவமைப்பிற்கு `Intl.NumberFormat` போன்ற JavaScript நூலகங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.

            // Example using Intl.NumberFormat
const number = 1234567.89;

// Format as US English
const usEnglish = new Intl.NumberFormat('en-US').format(number); // Output: 1,234,567.89

// Format as German
const german = new Intl.NumberFormat('de-DE').format(number);   // Output: 1.234.567,89

// Format as Indian English
const indianEnglish = new Intl.NumberFormat('en-IN').format(number); // Output: 12,34,567.89

            

              
                Copy
              
            
          

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

5. வரையறுக்கப்பட்ட சின்னங்களுடன் தனிப்பயன் கவுண்டர் ஸ்டைல்கள்

நீங்கள் கணக்கிடும் தனித்துவமான உறுப்புகள் அல்லது நிலைகளின் வரையறுக்கப்பட்ட எண்ணிக்கை உங்களிடம் இருந்தால், `symbols()` அமைப்பைப் பயன்படுத்தி ஒரு தனிப்பயன் கவுண்டர் ஸ்டைலை உருவாக்கலாம். இது கவுண்டர் மதிப்புகளை குறிப்பிட்ட சின்னங்கள் அல்லது ஐகான்களுக்கு மேப் செய்ய உங்களை அனுமதிக்கிறது.

உதாரணம்:

            @counter-style icon-style {
  system: symbols;
  symbols: "\2605" "\2606" "\272A" "\272B"; /* Star symbols */
  suffix: " ";
}

body {
  counter-reset: step;
}

li::before {
  counter-increment: step;
  content: counter(step, icon-style);
}

            

              
                Copy
              
            
          

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

எப்போது பயன்படுத்த வேண்டும்: வரையறுக்கப்பட்ட மதிப்புகளை தனித்துவமான சின்னங்கள் அல்லது ஐகான்களுடன் பிரதிநிதித்துவப்படுத்த விரும்பும்போது.

6. JavaScript உடன் அதிகரிக்கும் கவுண்டர்கள்

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

உதாரணம் (விளக்கத்திற்காக, JavaScript மற்றும் HTML தேவை):

            <div id="counter">0</div>
<button id="increment">Increment</button>

<script>
  const counterElement = document.getElementById('counter');
  const incrementButton = document.getElementById('increment');
  let counterValue = 0;

  incrementButton.addEventListener('click', () => {
    counterValue += 1000000; // Increment by a large value
    counterElement.textContent = formatNumber(counterValue); // Use a custom formatNumber function
  });

  function formatNumber(number) {
      // Add your custom formatting logic here (e.g., abbreviations, commas)
      return abbreviateNumber(number); //Use the abbreviateNumber function from before
  }
</script>

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு ஒரு அடிப்படை பொத்தானைக் காட்டுகிறது, அது ஒவ்வொரு முறை கிளிக் செய்யப்படும்போதும் ஒரு கவுண்டரை 1,000,000 ஆல் அதிகரிக்கிறது. `formatNumber` செயல்பாடு உங்கள் தனிப்பயன் வடிவமைப்பு தர்க்கத்தைக் கொண்டிருக்கும், இது முன்பு விவாதிக்கப்பட்ட பிற முறைகளைப் பயன்படுத்தக்கூடும்.

எப்போது பயன்படுத்த வேண்டும்: கவுண்டரின் அதிகரிக்கும் தர்க்கம் மற்றும் காட்சி வடிவமைப்பு மீது முழுமையான கட்டுப்பாடு தேவைப்படும்போது, அல்லது தேவைகள் CSS கவுண்டர்களின் திறன்களை மீறும் போது.

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

பெரிய எண்களைக் காண்பிக்கும் உத்திகளைச் செயல்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம். காண்பிக்கப்படும் எண்கள் குறைபாடுகள் உள்ள பயனர்களுக்குப் புரியக்கூடியவை என்பதை உறுதிப்படுத்தவும்.

• அர்த்தமுள்ள HTML ஐப் பயன்படுத்தவும்: நீங்கள் எண்ணிடும் உள்ளடக்கத்திற்கு பொருத்தமான HTML உறுப்புகளைப் பயன்படுத்தவும் (எ.கா., <ol>, <li>).
• மாற்று உரையை வழங்கவும்: எண்களைப் பிரதிநிதித்துவப்படுத்த ஐகான்கள் அல்லது சின்னங்களைப் பயன்படுத்துகிறீர்கள் என்றால், திரை வாசிப்பான்களுக்கு அர்த்தமுள்ள மாற்று உரையை வழங்கவும்.
• போதுமான கான்ட்ராஸ்ட்டை உறுதிப்படுத்தவும்: பார்வை குறைபாடுள்ள பயனர்களுக்கு உரை மற்றும் சின்னங்கள் பின்னணிக்கு எதிராக போதுமான கான்ட்ராஸ்ட் கொண்டிருப்பதை உறுதி செய்யவும்.
• உதவி தொழில்நுட்பங்களுடன் சோதிக்கவும்: உங்கள் செயலாக்கத்தை திரை வாசிப்பான்கள் மற்றும் பிற உதவி தொழில்நுட்பங்களுடன் முழுமையாகச் சோதித்து அது அணுகக்கூடியது என்பதை உறுதிப்படுத்தவும்.

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

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

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

முடிவுரை

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