CSS കൗണ്ടർ സ്റ്റൈൽ മാസ്റ്ററിംഗ്: ലോകമെമ്പാടുമുള്ള പ്രേക്ഷകർക്കായി നെഗറ്റീവ് നമ്പറുകൾ ഫോർമാറ്റ് ചെയ്യുന്നു

വെബ് ഡിസൈനിന്റെ വളർന്നുകൊണ്ടിരിക്കുന്ന ലാൻഡ്‌സ്‌കേപ്പിൽ, നമ്പറുകളുടെ കൃത്യവും സാംസ്കാരികമായി സെൻസിറ്റീവുമായ അവതരണം വളരെ പ്രധാനമാണ്, പ്രത്യേകിച്ച് നെഗറ്റീവ് മൂല്യങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ. CSS ഉള്ളടക്കം സ്റ്റൈൽ ചെയ്യുന്നതിന് ശക്തമായ ടൂളുകൾ വാഗ്ദാനം ചെയ്യുമ്പോൾ, ഒരു ലോകമെമ്പാടുമുള്ള പ്രേക്ഷകർക്കായി നെഗറ്റീവ് നമ്പറുകളുടെ സൂക്ഷ്മമായ ഫോർമാറ്റിംഗിന് ചരിത്രപരമായി സങ്കീർണ്ണമായ ജാവാസ്ക്രിപ്റ്റ് പരിഹാരങ്ങളോ സെർവർ-സൈഡ് ലോജിക്കിനെ ആശ്രയിക്കുന്നതോ ആവശ്യമായിരുന്നു. എന്നിരുന്നാലും, CSS കൗണ്ടർ സ്റ്റൈൽസ് മൊഡ്യൂളിന്റെ വരവും വർദ്ധിച്ചുവരുന്ന സ്വീകാര്യതയും കൊണ്ട്, ഡിസൈനർമാർക്കും ഡെവലപ്പർമാർക്കും ഇപ്പോൾ കൗണ്ടറുകളും ലിസ്റ്റ് ഐറ്റങ്ങളും എങ്ങനെ പ്രദർശിപ്പിക്കുന്നു, ഇടയ്ക്കിടെയുള്ള നെഗറ്റീവ് നമ്പറുകളുടെ ഫോർമാറ്റിംഗ് ഉൾപ്പെടെ, നിയന്ത്രിക്കാൻ ഒരു ശക്തമായ, നേറ്റീവ് മാർഗ്ഗം ലഭിച്ചിട്ടുണ്ട്.

ഈ സമഗ്രമായ ഗൈഡ് നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റിംഗ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള CSS കൗണ്ടർ സ്റ്റൈലുകളുടെ കഴിവുകളിലേക്ക് കടന്നുചെല്ലുന്നു. അടിസ്ഥാന തത്വങ്ങൾ ഞങ്ങൾ പരിശോധിക്കും, പ്രായോഗിക നടപ്പാക്കലുകൾ പ്രദർശിപ്പിക്കും, കൂടാതെ യഥാർത്ഥ അന്താരാഷ്ട്രവൽക്കരിച്ച വെബ് സാന്നിധ്യത്തിനായി ഈ ടെക്നിക്കുകൾ സ്വീകരിക്കുന്നതിനുള്ള ഉൾക്കാഴ്ചകൾ വാഗ്ദാനം ചെയ്യും.

നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റിംഗിന്റെ വെല്ലുവിളി

നെഗറ്റീവ് നമ്പറുകൾ വിവിധ സംസ്കാരങ്ങളിലും സന്ദർഭങ്ങളിലും വ്യത്യസ്തമായി പ്രതിനിധീകരിക്കുന്നു. സാധാരണ നൊട്ടേഷനുകളിൽ ഇവ ഉൾപ്പെടുന്നു:

• ഒരു പ്രമുഖ മൈനസ് ചിഹ്നം: -10
• അടയാളങ്ങൾ: (10)
• ഒരു പിൻ മൈനസ് ചിഹ്നം: 10-
• ഒരു പ്രത്യേക കറൻസി ചിഹ്നം സ്ഥാപിക്കൽ: -$10 അല്ലെങ്കിൽ 10$

ലളിതമായ പ്രതിനിധാനത്തിനപ്പുറം, ഒരു നമ്പറിന്റെ സന്ദർഭം പലപ്പോഴും അതിന്റെ ഫോർമാറ്റിംഗ് നിർണ്ണയിക്കുന്നു. ഉദാഹരണത്തിന്, ധനകാര്യ റിപ്പോർട്ടുകൾക്ക് നെഗറ്റീവ് നമ്പറുകളെ പോസിറ്റീവ് ഫിഗറുകളിൽ നിന്ന് ദൃശ്യപരമായി വേർതിരിച്ചറിയാൻ അടയാളങ്ങൾ ഇഷ്ടപ്പെട്ടേക്കാം, അതേസമയം ശാസ്ത്രീയ നൊട്ടേഷന് അതിന്റേതായ സമ്പ്രദായങ്ങൾ ഉണ്ടായേക്കാം. വൈവിധ്യമാർന്ന പശ്ചാത്തലങ്ങളിൽ നിന്നുള്ള ഉപയോക്താക്കൾ സംവദിക്കുന്ന ഒരു ആഗോള വെബ്സൈറ്റിലുടനീളം ഇത് സ്റ്റാൻഡേർഡ് ചെയ്യുന്നത് ഒരു പ്രധാന ഡിസൈൻ വെല്ലുവിളിയായിരിക്കും.

ചരിത്രപരമായി, ഏതെങ്കിലും കൗണ്ടറുകൾക്ക് CSS-ൽ നേരിട്ട് ഈ തലത്തിലുള്ള നിയന്ത്രണം നേടുന്നത് പരിമിതമായിരുന്നു. ഡെവലപ്പർമാർ പലപ്പോഴും ഇവയെ ആശ്രയിച്ചിരുന്നു:

• സെർവർ-സൈഡ് റെൻഡറിംഗ്: ബ്രൗസറിലേക്ക് അയയ്ക്കുന്നതിന് മുമ്പ് നമ്പറുകൾ ഫോർമാറ്റ് ചെയ്യുക.
• ജാവാസ്ക്രിപ്റ്റ് മാനിപ്പുലേഷൻ: നെഗറ്റീവ് നമ്പറുകൾ കണ്ടെത്താനും അനുയോജ്യമായ ക്ലാസുകളോ സ്റ്റൈലുകളോ പ്രയോഗിക്കാനും ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുക.
• മുൻകൂട്ടി നിശ്ചയിച്ച CSS ക്ലാസുകൾ: വ്യത്യസ്ത നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റുകൾക്കായി ഒന്നിലധികം ക്ലാസുകൾ സൃഷ്ടിക്കുക (ഉദാ., .negative-paren, .negative-dash).

ഈ രീതികൾ, പ്രവർത്തനക്ഷമമാണെങ്കിലും, കുറഞ്ഞ പരിപാലിക്കാവുന്ന കോഡ്, വർദ്ധിച്ച ലോഡ് സമയങ്ങൾ, ഉള്ളടക്കത്തിനും അവതരണ ലോജിക്കിനും ഇടയിൽ ഒരു വിച്ഛേദനം എന്നിവയിലേക്ക് നയിച്ചേക്കാം.

CSS കൗണ്ടർ സ്റ്റൈലുകൾ പരിചയപ്പെടുത്തുന്നു

CSS കൗണ്ടർ സ്റ്റൈൽസ് മൊഡ്യൂൾ കസ്റ്റം ലിസ്റ്റ്-ഐറ്റം മാർക്കറുകളും കൗണ്ടർ സ്റ്റൈലുകളും നിർവചിക്കാൻ ഒരു ഡിക്ലറേറ്റീവ് മാർഗ്ഗം നൽകുന്നു. ഇത് ഡെവലപ്പർമാരെ സ്റ്റാൻഡേർഡ് decimal, lower-alpha, അല്ലെങ്കിൽ upper-roman എന്നിവയ്ക്ക് പുറമെ സങ്കീർണ്ണമായ നമ്പറിംഗ് സിസ്റ്റങ്ങൾ സൃഷ്ടിക്കാൻ അനുവദിക്കുന്നു. അതിന്റെ കാതലായി, list-style-type പ്രോപ്പർട്ടി ഉപയോഗിച്ച് അല്ലെങ്കിൽ counter-set, counter() CSS ഫംഗ്ഷനുകൾ ഉപയോഗിച്ച് പ്രയോഗിക്കാവുന്ന ഒരു പേരുള്ള കൗണ്ടർ സ്റ്റൈൽ നിർവചിക്കാൻ ഇത് @counter-style റൂളിനെ പ്രയോജനപ്പെടുത്തുന്നു.

നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റിംഗിനുള്ള യഥാർത്ഥ ശക്തി @counter-style റൂളിനുള്ളിലെ negative ഡിസ്ക്രിപ്റ്ററിലാണ്. പോസിറ്റീവ് അല്ലാത്ത മൂല്യങ്ങൾക്കുള്ള ഫോർമാറ്റിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ഫോർമാറ്റ് നെഗറ്റീവ് കൗണ്ടർ മൂല്യങ്ങൾക്കായി വ്യക്തമാക്കാൻ ഈ ഡിസ്ക്രിപ്റ്റർ നിങ്ങളെ അനുവദിക്കുന്നു.

@counter-style റൂളും അതിന്റെ ഡിസ്ക്രിപ്റ്ററുകളും

ഒരു സാധാരണ @counter-style റൂളിന് താഴെ പറയുന്ന ഘടനയുണ്ട്:

            @counter-style custom-counter-name {
  /* Descriptors go here */
}

            

              
                Copy
              
            
          

നമ്പർ ഫോർമാറ്റിംഗുമായി ബന്ധപ്പെട്ട പ്രധാന ഡിസ്ക്രിപ്റ്ററുകളിൽ ഇവ ഉൾപ്പെടുന്നു:

• name: കൗണ്ടർ സ്റ്റൈലിന്റെ പേര് (ആവശ്യമാണ്).
• symbols: അക്കങ്ങൾ പ്രതിനിധീകരിക്കാൻ ഉപയോഗിക്കുന്ന അക്ഷരങ്ങളോ സ്ട്രിംഗുകളോ (ഉദാ., ഡെസിമലിന് '0' '1' '2' ... '9').
• suffix: കൗണ്ടർ മൂല്യത്തിലേക്ക് ചേർക്കുന്ന ഒരു സ്ട്രിംഗ് (ഉദാ., ഡെസിമൽ ലിസ്റ്റ് മാർക്കറുകൾക്ക് '.').
• pad-with: ഒരു നിശ്ചിത അക്ഷരം ഉപയോഗിച്ച് പാഡ് ചെയ്തുകൊണ്ട് കൗണ്ടർ മൂല്യത്തിന് ഒരു മിനിമം വീതിയുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.
• speak-as: സഹായിക്കുന്ന സാങ്കേതികവിദ്യകൾ എങ്ങനെ കൗണ്ടർ സംസാരിക്കണം എന്ന് നിർവചിക്കുന്നു.
• fallback: കസ്റ്റം സ്റ്റൈൽ റെൻഡർ ചെയ്യാൻ കഴിയുന്നില്ലെങ്കിൽ ഉപയോഗിക്കേണ്ട ഒരു ഫോൾബാക്ക് കൗണ്ടർ സ്റ്റൈൽ.
• additive-symbols: റോമൻ സംഖ്യകൾ പോലുള്ള സംയോജിത സംവിധാനങ്ങൾക്ക്.
• range: സ്റ്റൈൽ പ്രയോഗിക്കുന്ന കൗണ്ടർ മൂല്യങ്ങളുടെ വ്യാപ്തി നിർവചിക്കുന്നു (ഉദാ., പോസിറ്റീവിന് '0' infinity, നെഗറ്റീവിന് '-infinity' '0').
• negative: നെഗറ്റീവ് നമ്പറുകൾക്കായി പ്രയോഗിക്കേണ്ട ഫോർമാറ്റ്. ഇത് നമ്മുടെ പ്രധാന ശ്രദ്ധയാണ്.

negative ഡിസ്ക്രിപ്റ്റർ മനസ്സിലാക്കുന്നു

negative ഡിസ്ക്രിപ്റ്റർ ഒരു പ്രിഫിക്സ്, നമ്പർ പ്രതിനിധാനം, നെഗറ്റീവ് മൂല്യങ്ങൾക്കുള്ള ഒരു സഫിക്സ് എന്നിവ നിർവചിക്കുന്ന സ്ട്രിംഗുകളുടെ ഒരു ലിസ്റ്റ് സ്വീകരിക്കുന്നു. ഫോർമാറ്റ് സാധാരണയായി പിന്തുടരുന്നു:

            negative: prefix number-representation suffix;

            

              
                Copy
              
            
          

ഉദാഹരണത്തിന്:

• negative: '-' ; (നമ്പറിന് മുമ്പ് ഒരു മൈനസ് ചിഹ്നം ചേർക്കുന്നു)
• negative: '(' ')' ; (അടയാളങ്ങൾക്കുള്ളിൽ നമ്പർ ഉൾക്കൊള്ളുന്നു)
• negative: '' '-' ; (നമ്പറിന് ശേഷം ഒരു മൈനസ് ചിഹ്നം ചേർക്കുന്നു)

number-representation എന്നത് '...' പോലുള്ള സിസ്റ്റം-നിർവചിച്ച കീവേഡ് ആകാം (ഇത് നമ്പറിന്റെ തന്നെ സ്റ്റാൻഡേർഡ് പ്രതിനിധാനം സൂചിപ്പിക്കുന്നു) അല്ലെങ്കിൽ ഒരു നിശ്ചിത ഫോർമാറ്റ് സ്ട്രിംഗ്.

CSS കൗണ്ടർ സ്റ്റൈലുകൾ ഉപയോഗിച്ച് നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റിംഗിന്റെ പ്രായോഗിക ഉദാഹരണങ്ങൾ

വിവിധ നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റിംഗ് ശൈലികൾ നേടാൻ negative ഡിസ്ക്രിപ്റ്റർ എങ്ങനെ ഉപയോഗിക്കാം എന്ന് നമുക്ക് ചിത്രീകരിക്കാം.

ഉദാഹരണം 1: സ്റ്റാൻഡേർഡ് മൈനസ് ചിഹ്നം പ്രിഫിക്സ്

ഇതാണ് ഏറ്റവും സാധാരണമായ പ്രതിനിധാനം. നെഗറ്റീവ് നമ്പറുകൾ ഒരു പ്രമുഖ മൈനസ് ചിഹ്നത്തോടെ ദൃശ്യമാകണമെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, -10 പോലെ.

            @counter-style negative-dash {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '.';
  negative: '-' ; /* Formats negative numbers with a leading minus */
  range: -infinity 0;
}

/* Apply to an ordered list */
.financial-list {
  list-style-type: negative-dash;
}

            

              
                Copy
              
            
          

counter-set ഉപയോഗിച്ച് മൂല്യങ്ങൾ സജ്ജീകരിച്ചിട്ടുള്ള ലിസ്റ്റ് ഇനങ്ങൾ ഞങ്ങൾക്ക് ഉണ്ടെങ്കിൽ, ഇതുപോലെ:

            .item-positive { counter-set: financial-value 50; }
.item-negative { counter-set: financial-value -25; }

            

              
                Copy
              
            
          

പിന്നെ counter(financial-value) ഒരു സ്യൂഡോ-എലമെന്റിൽ ഉപയോഗിച്ചാൽ, ഔട്ട്‌പുട്ട് ഇങ്ങനെയായിരിക്കും:

• 50.
• -25.

ഉദാഹരണം 2: നെഗറ്റീവ് നമ്പറുകൾക്കായി അടയാളങ്ങൾ

പല ധനകാര്യ, അക്കൗണ്ടിംഗ് സന്ദർഭങ്ങളിലും നെഗറ്റീവ് നമ്പറുകൾ അടയാളങ്ങളിൽ ഉൾപ്പെടുത്താൻ ഇഷ്ടപ്പെടുന്നു. ഉദാഹരണത്തിന്, (25).

            @counter-style negative-paren {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '(' ')' ; /* Encloses negative numbers in parentheses */
  range: -infinity 0;
}

.account-list {
  list-style-type: negative-paren;
}

            

              
                Copy
              
            
          

counter-set: financial-value -25; ഉപയോഗിച്ച്, ഔട്ട്‌പുട്ട് ഇങ്ങനെയായിരിക്കും:

• (25)

ഉദാഹരണം 3: പിൻ മൈനസ് ചിഹ്നം

പടിഞ്ഞാറൻ സംസ്കാരങ്ങളിൽ ഇത് അത്ര സാധാരണമല്ലെങ്കിലും, ചില പ്രാദേശിക സമ്പ്രദായങ്ങൾ 25- പോലുള്ള ഒരു പിൻ മൈനസ് ചിഹ്നം ഉപയോഗിച്ചേക്കാം.

            @counter-style negative-trailing-dash {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '' '-' ; /* Appends a minus sign after the number */
  range: -infinity 0;
}

.billing-list {
  list-style-type: negative-trailing-dash;
}

            

              
                Copy
              
            
          

counter-set: financial-value -25; ഉപയോഗിച്ച്, ഔട്ട്‌പുട്ട് ഇങ്ങനെയായിരിക്കും:

• 25-

ഉദാഹരണം 4: കറൻസി ചിഹ്നങ്ങൾ ഉൾക്കൊള്ളുന്നു

നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റിംഗുമായി കറൻസി ചിഹ്നങ്ങൾ സംയോജിപ്പിക്കുന്നത് മറ്റൊരു തലത്തിലുള്ള സങ്കീർണ്ണത ചേർക്കുന്നു. CSS കൗണ്ടർ സ്റ്റൈലുകൾക്ക് negative ഡിസ്ക്രിപ്റ്ററിനുള്ളിൽ ചിഹ്നങ്ങൾ ഉൾക്കൊള്ളുന്നതിലൂടെ ഇത് കൈകാര്യം ചെയ്യാൻ കഴിയും. ഉദാഹരണത്തിന്, നെഗറ്റീവ് യുഎസ് ഡോളറുകൾ -$10 ആയി പ്രതിനിധീകരിക്കുന്നതിന്.

            @counter-style negative-usd {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '-$' ; /* Adds '-$' prefix for negative numbers */
  range: -infinity 0;
}

.currency-list {
  list-style-type: negative-usd;
}

            

              
                Copy
              
            
          

counter-set: currency-value -25; ഉപയോഗിച്ച്, ഔട്ട്‌പുട്ട് ഇങ്ങനെയായിരിക്കും:

• -$25

പ്രധാന പരിഗണന ആഗോള കറൻസിക്ക്: ഇത് മെക്കാനിസം പ്രദർശിപ്പിക്കുന്നുണ്ടെങ്കിലും, യഥാർത്ഥ ആഗോള കറൻസി ഫോർമാറ്റിംഗിന് സ്റ്റാറ്റിക് പ്രിഫിക്സിനേക്കാൾ കൂടുതൽ ആവശ്യമാണ്. വ്യത്യസ്ത പ്രദേശങ്ങൾക്ക് വ്യത്യസ്ത കറൻസി ചിഹ്നങ്ങൾ, സ്ഥാപനങ്ങൾ, ദശാംശ/ആയിരം സെപ്പറേറ്ററുകൾ എന്നിവയുണ്ട്. സമഗ്രമായ അന്താരാഷ്ട്ര കറൻസി ഫോർമാറ്റിംഗിന്, ഉപയോക്താവിന്റെ ലോക്കേൽ അടിസ്ഥാനമാക്കി ശരിയായ ഫോർമാറ്റിംഗ് നൽകുന്ന ലോക്കലൈസേഷൻ ലൈബ്രറികളുമായോ സെർവർ-സൈഡ് ഡാറ്റയുമായോ CSS കൗണ്ടർ സ്റ്റൈലുകൾ സംയോജിപ്പിക്കേണ്ടത് സാധാരണയായി ആവശ്യമാണ്.

ഉദാഹരണം 5: റേഞ്ചും നെഗറ്റീവ് ഫോർമാറ്റിംഗും സംയോജിപ്പിക്കുന്നു

ഒരു നിശ്ചിത ശൈലി എപ്പോൾ പ്രയോഗിക്കണം എന്ന് നിർവചിക്കുന്നതിന് range ഡിസ്ക്രിപ്റ്റർ നിർണായകമാണ്. ഡിഫോൾട്ടായി, range: '0' infinity; പോസിറ്റീവ് അല്ലാത്ത നമ്പറുകൾക്ക് പ്രയോഗിക്കുന്നു, range: '-infinity' '0'; നെഗറ്റീവ് നമ്പറുകൾക്ക് പ്രയോഗിക്കുന്നു. ആവശ്യമെങ്കിൽ ഈ റേഞ്ചുകൾ വ്യക്തമായി നിർവചിക്കാൻ ഞങ്ങൾക്ക് കഴിയും, പക്ഷേ negative യുടെ ഡിഫോൾട്ട് പെരുമാറ്റം ഡിഫോൾട്ട് പോസിറ്റീവ് റേഞ്ചുമായി ചേർന്ന് ഉപയോഗിക്കുമ്പോൾ പലപ്പോഴും മതിയാകും.

പോസിറ്റീവ് നമ്പറുകൾ ലളിതമായിരിക്കണമെന്നും നെഗറ്റീവ് നമ്പറുകൾ അടയാളങ്ങളിൽ ആയിരിക്കണമെന്നും, അറിയാത്ത മൂല്യങ്ങൾക്ക് ഒരു ഫോൾബാക്ക് ഉണ്ടായിരിക്കണമെന്നും നിങ്ങൾ ആഗ്രഹിക്കുന്ന ഒരു സാഹചര്യം പരിഗണിക്കുക.

            @counter-style custom-finance {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '(' ')' ; /* Negative numbers in parentheses */
  fallback: decimal; /* Use decimal for anything else */
  range: -infinity 0;
}

.account-balances {
  list-style-type: custom-finance;
}

            

              
                Copy
              
            
          

കസ്റ്റം കൗണ്ടർ സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നു

@counter-style റൂൾ നിർവചിച്ചുകഴിഞ്ഞാൽ, അത് പല വഴികളിൽ പ്രയോഗിക്കാവുന്നതാണ്:

1. ലിസ്റ്റ് ഐറ്റങ്ങൾക്കായി (
   ,
   ): ലിസ്റ്റ് ഘടകത്തിൽ നേരിട്ടോ വ്യക്തിഗത ലിസ്റ്റ് ഐറ്റങ്ങളിലോ list-style-type പ്രോപ്പർട്ടി ഉപയോഗിക്കുക.
   1. ഏതെങ്കിലും കൗണ്ടറുകൾക്കായി: content പോലുള്ള CSS പ്രോപ്പർട്ടികളിൽ (പലപ്പോഴും ::before അല്ലെങ്കിൽ ::after പോലുള്ള സ്യൂഡോ-എലമെന്റുകളിൽ) counter() ഫംഗ്ഷൻ ഉപയോഗിക്കുക.

   list-style-type ഉപയോഗിക്കുന്നു

   പരമ്പരാഗത ലിസ്റ്റുകൾക്കുള്ള ഏറ്റവും ലളിതമായ പ്രയോഗമാണിത്.

   <ul>
     <li style="counter-set: mycount -5;">Item One</li>
     <li style="counter-set: mycount 10;">Item Two</li>
     <li style="counter-set: mycount -15;">Item Three</li>
   </ul>
   
   <style>
     /* Assume @counter-style negative-paren is defined above */
     ul {
       list-style-type: negative-paren;
     }
     /* If using counter-set on specific items, you might need to override */
     li {
        /* This doesn't directly work to display the counter value */
     }
   </style>
   
   <p>സ്റ്റാൻഡേർഡ് ol മാർക്കറുകൾക്ക് ഇത് സാധാരണയായി കുറഞ്ഞ ഉപയോഗപ്രദമായ സാഹചര്യമാണ്, എന്നാൽ counter-set, counter() എന്നിവ സ്യൂഡോ-എലമെന്റുകളിൽ ഉപയോഗിച്ച് നെഗറ്റീവ് നമ്പർ എങ്ങനെ പ്രദർശിപ്പിക്കാം എന്നതിനെക്കുറിച്ച് നിങ്ങൾക്ക് യഥാർത്ഥ ലിസ്റ്റ് മാർക്കറുകൾ നിയന്ത്രിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ:</p>
   
   <style>
     @counter-style my-custom-list-style {
       symbols: 
       negative: 
     }
     ol {
       list-style-type: my-custom-list-style;
     }
   </style>
   <ol>
     <li>First item (would be numbered '1')</li>
     <li>Second item (would be numbered '2')</li>
   </ol>
   
   <p>ഏതെങ്കിലും നെഗറ്റീവ് നമ്പറുകൾ ലിസ്റ്റ് മാർക്കറുകളായി യഥാർത്ഥത്തിൽ പ്രദർശിപ്പിക്കാൻ, നിങ്ങൾ സാധാരണയായി counter-set, counter() എന്നിവ സ്യൂഡോ-എലമെന്റുകളിൽ ഉപയോഗിക്കേണ്ടി വരും.</p>
   
   
   counter() സ്യൂഡോ-എലമെന്റുകളുമായി ഉപയോഗിക്കുന്നു
   
   ഇവിടെയാണ് ഏതെങ്കിലും കസ്റ്റം സംഖ്യാ പ്രദർശനത്തിനുള്ള യഥാർത്ഥ ശക്തി തിളങ്ങുന്നത്, പ്രത്യേകിച്ച് സ്റ്റാൻഡേർഡ് ലിസ്റ്റുകൾ അല്ലാത്ത ഘടകങ്ങൾക്ക്.
   
   <div class="data-point"
        style="counter-set: value -12.5;"
   >Value</div>
   <div class="data-point"
        style="counter-set: value 25.7;"
   >Value</div>
   
   <style>
     @counter-style data-number {
       symbols: 
       negative: 
       suffix: '%';
       range: -infinity 0;
     }
   
     .data-point::before {
       content: counter(value, data-number) " ";
       display: inline-block;
       margin-right: 10px;
       font-weight: bold;
     }
   
     /* Example: Styling negative values distinctly */
     .data-point[style*='-12.5']::before {
       color: red;
     }
   </style>
   
   
   മുകളിലുള്ളവയുടെ ഔട്ട്‌പുട്ട് ഇങ്ങനെയായിരിക്കും:
   
   
     
   -12.5% (സാധ്യതയേറിയ രീതിയിൽ ചുവപ്പ്, പ്രത്യേക CSS അനുസരിച്ച്)
     
   25.7%
   
   
   counter-set നെക്കുറിച്ച് ശ്രദ്ധിക്കുക: counter-set പ്രോപ്പർട്ടി സാധാരണയായി ഒരു കൗണ്ടർ ആരംഭിക്കാനോ റീസെറ്റ് ചെയ്യാനോ ഒരു പൂർവ്വിക ഘടകത്തിൽ പ്രയോഗിക്കുന്നു. ഒരു .data-point പോലുള്ള ഘടകത്തിൽ നേരിട്ട് ഉപയോഗിക്കുമ്പോൾ, അത് ആ ഘടകത്തിന്റെ സന്ദർഭത്തിനായി കൗണ്ടർ സജ്ജമാക്കുന്നു. counter() ഉപയോഗിക്കുന്നത് ഈ മൂല്യം വീണ്ടെടുക്കും.
   
   ആഗോള പരിഗണനകളും മികച്ച സമ്പ്രദായങ്ങളും
   
   ഒരു ലോകമെമ്പാടുമുള്ള പ്രേക്ഷകർക്കായി രൂപകൽപ്പന ചെയ്യുമ്പോൾ, ഈ മികച്ച സമ്പ്രദായങ്ങൾ പാലിക്കുക:
   
   
     
   പ്രാദേശിക സമ്പ്രദായങ്ങൾ ഗവേഷണം ചെയ്യുക: നിങ്ങളുടെ ലക്ഷ്യമിടുന്ന പ്രദേശങ്ങളിൽ നെഗറ്റീവ് നമ്പറുകളും കറൻസികളും എങ്ങനെ പ്രതിനിധീകരിക്കുന്നു എന്ന് മനസ്സിലാക്കുക. ഉദാഹരണങ്ങൾ സാധാരണ ഫോർമാറ്റുകൾ ഉൾക്കൊള്ളുന്നുണ്ടെങ്കിലും, ചില പ്രദേശങ്ങൾക്ക് തനതായ മുൻഗണനകൾ ഉണ്ടായേക്കാം.
     
   തീവ്രമായി പരീക്ഷിക്കുക: വിവിധ ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും നിങ്ങളുടെ നടപ്പാക്കലുകൾ പരീക്ഷിക്കുക. റെൻഡറിംഗ് സ്ഥിരവും പ്രതീക്ഷിച്ചതുപോലെയും ആണെന്ന് ഉറപ്പാക്കുക.
     
   വായിക്കാനുള്ള ലഭ്യതക്ക് മുൻഗണന നൽകുക: വ്യക്തമായ ആശയവിനിമയമാണ് പ്രാഥമിക ലക്ഷ്യം. നിങ്ങളുടെ ഫോർമാറ്റിംഗ് സങ്കീർണ്ണമാക്കുന്നതിനേക്കാൾ മനസ്സിലാക്കൽ മെച്ചപ്പെടുത്തുന്നത് തിരഞ്ഞെടുക്കുക. സ്റ്റാൻഡേർഡ് മൈനസ് ചിഹ്നം പലപ്പോഴും ഏറ്റവും സാർവത്രികമായി മനസ്സിലാക്കുന്നത്.
     
   പ്രവേശനക്ഷമത: നിങ്ങളുടെ തിരഞ്ഞെടുത്ത ഫോർമാറ്റിംഗ് സ്ക്രീൻ റീഡറുകളെയോ മറ്റ് സഹായിക്കുന്ന സാങ്കേതികവിദ്യകളെയോ തടസ്സപ്പെടുത്തുന്നില്ലെന്ന് ഉറപ്പാക്കുക. speak-as ഡിസ്ക്രിപ്റ്റർ ഇവിടെ നിർണായകമായേക്കാം, പക്ഷേ സാധാരണയായി, സ്റ്റാൻഡേർഡ് സംഖ്യാ പ്രതിനിധാനങ്ങൾ സഹായിക്കുന്ന ടെക്സ് വളരെ നന്നായി കൈകാര്യം ചെയ്യുന്നു.
     
   ലോക്കലൈസേഷനുമായി (L10n) സംയോജിപ്പിക്കുക: കറൻസികൾ, തീയതികൾ, സമയങ്ങൾ എന്നിവ ഉൾക്കൊള്ളുന്ന സങ്കീർണ്ണമായ സാഹചര്യങ്ങൾക്ക്, CSS കൗണ്ടർ സ്റ്റൈലുകൾ ഒരു ഉപയോക്താവിന്റെ ലോക്കേൽ കണ്ടെത്തുകയും അനുയോജ്യമായ ഫോർമാറ്റിംഗ് പ്രയോഗിക്കുകയും ചെയ്യുന്ന ശക്തമായ അന്താരാഷ്ട്രവൽക്കരണ ലൈബ്രറികൾ അല്ലെങ്കിൽ സെർവർ-സൈഡ് ലോജിക്കുമായി സംയോജിച്ച് ഉപയോഗിക്കുന്നതാണ് ഏറ്റവും നല്ലത്.
     
   ഫോൾബാക്കുകൾ ഉപയോഗിക്കുക: നിങ്ങളുടെ കസ്റ്റം സ്റ്റൈൽ പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ അല്ലെങ്കിൽ ബ്രൗസർ മനസ്സിലാക്കുന്നില്ലെങ്കിൽ ഗ്രാസ്ഫുൾ ഡിഗ്രഡേഷൻ ഉറപ്പാക്കാൻ എപ്പോഴും ഒരു fallback കൗണ്ടർ സ്റ്റൈൽ നൽകുക. ബിൽറ്റ്-ഇൻ decimal സ്റ്റൈൽ ഒരു സുരക്ഷിതമായ ഓപ്ഷനാണ്.
     
   ലളിതമായി സൂക്ഷിക്കുക: ഒരു നിശ്ചിത പ്രാദേശിക ആവശ്യകത നിർദ്ദേശിച്ചില്ലെങ്കിൽ, ഏറ്റവും ലളിതവും സാർവത്രികമായി അംഗീകരിക്കപ്പെട്ടതുമായ ഫോർമാറ്റ് (സാധാരണയായി പ്രമുഖ മൈനസ് ചിഹ്നം) തിരഞ്ഞെടുക്കുക.
   
   
   അന്താരാഷ്ട്ര ഉദാഹരണങ്ങൾ
   
   
     
   ജർമ്മനി: പലപ്പോഴും ഒരു കോമയെ ദശാംശ സെപ്പറേറ്ററായും ഒരു പിരിയഡിനെ ആയിരം സെപ്പറേറ്ററായും ഉപയോഗിക്കുന്നു. നെഗറ്റീവ് നമ്പറുകൾ -1.234,56 അല്ലെങ്കിൽ ചിലപ്പോൾ (1.234,56) ആയി പ്രദർശിപ്പിച്ചേക്കാം.
     
   ജപ്പാൻ: സാധാരണയായി ആയിരം സെപ്പറേറ്ററുകൾക്ക് കോമകളും ദശാംശ സെപ്പറേറ്ററുകൾക്ക് പിരിയഡുകളും ഉപയോഗിക്കുന്നു, നെഗറ്റീവ് നമ്പറുകൾ -12,345.67 ആയി കാണിക്കുന്നു.
     
   ചൈന: ജപ്പാനെ സമാനമായി, ആയിരങ്ങൾക്ക് കോമകളും ദശാംശങ്ങൾക്ക് പിരിയഡുകളും ഉപയോഗിക്കുന്നു, നെഗറ്റീവ് നമ്പറുകൾ -12,345.67 ആയി ഫോർമാറ്റ് ചെയ്യുന്നു.
     
   ഫ്രാൻസ്: ആയിരം സെപ്പറേറ്ററുകൾക്ക് സ്പേസുകളും ദശാംശ സെപ്പറേറ്ററുകൾക്ക് കോമകളും ഉപയോഗിക്കുന്നു. നെഗറ്റീവ് നമ്പറുകൾ -1 234,56 അല്ലെങ്കിൽ (1 234,56) ആയിരിക്കാം.
   
   
   CSS കൗണ്ടർ സ്റ്റൈലുകൾക്ക് ദശാംശ, ആയിരം സെപ്പറേറ്ററുകൾ കൈകാര്യം ചെയ്യാൻ symbols നിർവചിക്കാൻ കഴിയും, പക്ഷേ നെഗറ്റീവ് പ്രതിനിധാനത്തിന്റെ പ്രധാന ഘടന (പ്രിഫിക്സ്, സഫിക്സ്) negative ഡിസ്ക്രിപ്റ്റർ നേരിട്ട് നിയന്ത്രിക്കുന്നത് അതാണ്.
   
   പരിമിതികളും ബ്രൗസർ പിന്തുണയും
   
   CSS കൗണ്ടർ സ്റ്റൈൽസ് മൊഡ്യൂൾ ശക്തമാണെങ്കിലും, ബ്രൗസർ പിന്തുണയെക്കുറിച്ച് അറിയേണ്ടത് അത്യാവശ്യമാണ്. ആധുനിക ബ്രൗസറുകൾ സാധാരണയായി @counter-style, negative ഉൾപ്പെടെയുള്ള അതിന്റെ ഡിസ്ക്രിപ്റ്ററുകൾക്ക് നല്ല പിന്തുണ നൽകുന്നു. എന്നിരുന്നാലും, പഴയ ബ്രൗസറുകൾക്കോ പൂർണ്ണ പിന്തുണ ഉറപ്പില്ലാത്ത സാഹചര്യങ്ങൾക്കോ, ഫോൾബാക്കുകൾ നിർണായകമാണ്.
   
   നിങ്ങൾക്ക് caniuse.com പോലുള്ള ഉറവിടങ്ങളിൽ നിലവിലെ ബ്രൗസർ പിന്തുണ പരിശോധിക്കാം. പഴയ ബ്രൗസറുകളുമായി അനുയോജ്യത ഒരു കർശനമായ ആവശ്യകതയാണെങ്കിൽ, ഒരു ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള പരിഹാരം ഇപ്പോഴും ഒരു ഗ്രാസ്ഫുൾ ഫോൾബാക്ക് ആയി ആവശ്യമായി വന്നേക്കാം.
   
   വിപുലമായ ടെക്നിക്കുകളും ഇഷ്ടമുള്ളതാക്കലും
   
   അടിസ്ഥാന negative ഡിസ്ക്രിപ്റ്ററിന് പുറമെ, CSS കൗണ്ടർ സ്റ്റൈലുകൾ കൂടുതൽ ഇഷ്ടമുള്ളതാക്കൽ നൽകുന്നു:
   
   
     
   അക്കങ്ങൾക്കുള്ള കസ്റ്റം ചിഹ്നങ്ങൾ: symbols ഡിസ്ക്രിപ്റ്റർ ഉപയോഗിച്ച് നിങ്ങളുടെ സ്വന്തം അക്കങ്ങളുടെ അക്ഷരസഞ്ചയങ്ങൾ നിങ്ങൾക്ക് നിർവചിക്കാൻ കഴിയും. ലാറ്റിൻ അല്ലാത്ത സ്ക്രിപ്റ്റുകൾക്കോ കസ്റ്റം നമ്പറിംഗ് സിസ്റ്റങ്ങൾക്കോ ഇത് ഉപയോഗപ്രദമായേക്കാം.
     
   ഫിക്സഡ് വീതിക്ക് pad-with: മുൻപത്തെ പൂജ്യങ്ങളോ മറ്റ് ചിഹ്നങ്ങളോ ഉപയോഗിച്ച് നിങ്ങളുടെ നമ്പറുകൾ ഒരു സ്ഥിരമായ ദൃശ്യ വീതി നിലനിർത്തുന്നുവെന്ന് ഉറപ്പാക്കുക.
     
   സങ്കീർണ്ണമായ റേഞ്ചുകൾ: നെഗറ്റീവ് ഫോർമാറ്റിംഗിന് നേരിട്ടല്ലെങ്കിലും, പോസിറ്റീവ്, നെഗറ്റീവ് മൂല്യങ്ങൾക്ക് പൂർണ്ണമായും വ്യത്യസ്ത അടിസ്ഥാന പ്രതിനിധാനങ്ങൾ ഉണ്ടെങ്കിൽ സങ്കീർണ്ണമായ സംഖ്യാ സമ്പ്രദായങ്ങൾക്ക് additive-symbols യുമായി range ഡിസ്ക്രിപ്റ്റർ സംയോജിപ്പിക്കാൻ കഴിയും.
   
   
   ഉദാഹരണത്തിന്, ഒറ്റ അക്കങ്ങൾക്ക് ഒരു പ്രമുഖ പൂജ്യത്തോടെ നമ്പറുകൾ ഫോർമാറ്റ് ചെയ്യാനും നെഗറ്റീവ് മൂല്യങ്ങൾക്ക് അടയാളങ്ങൾ ഉപയോഗിക്കാനും:
   
   @counter-style padded-negative {
     symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
     suffix: '';
     pad-with: '0'; /* Pad with zero to at least 2 digits */
     negative: '(' ')' ; 
     range: -99 99; /* Apply padding only within this range */
   }
   
   
   ഇത് -5 നെ (-05) ആയി പ്രദർശിപ്പിക്കും, pad-with അബ്സൊല്യൂട്ട് മൂല്യത്തിന് പ്രയോഗിക്കുകയാണെങ്കിൽ, അല്ലെങ്കിൽ (-5) pad-with കേവലം പോസിറ്റീവ് പ്രതിനിധാനത്തെ ബാധിക്കുകയാണെങ്കിൽ. കൃത്യമായ പെരുമാറ്റം സൂക്ഷ്മമായിരിക്കാം, ടെസ്റ്റിംഗ് പ്രധാനമാണ്.
   
   ഉപസംഹാരം
   
   CSS കൗണ്ടർ സ്റ്റൈൽസ് മൊഡ്യൂൾ, പ്രത്യേകിച്ച് negative ഡിസ്ക്രിപ്റ്റർ, വെബ് ഡിസൈനർമാർക്കും ഡെവലപ്പർമാർക്കും CSS-ൽ നേരിട്ട് സങ്കീർണ്ണവും സാംസ്കാരികമായി അനുയോജ്യവുമായ നെഗറ്റീവ് നമ്പർ ഫോർമാറ്റിംഗ് നടപ്പാക്കാൻ ശക്തി നൽകുന്നു. ഈ നേറ്റീവ് സമീപനം വൃത്തിയുള്ള കോഡ്, മെച്ചപ്പെട്ട പ്രകടനം, കൂടുതൽ ശക്തമായ അന്താരാഷ്ട്രവൽക്കരണ തന്ത്രം എന്നിവയിലേക്ക് നയിക്കുന്നു.
   
   @counter-style മനസ്സിലാക്കുകയും പ്രയോജനപ്പെടുത്തുകയും ചെയ്തുകൊണ്ട്, നിങ്ങൾക്ക് സാധാരണ സംഖ്യാ പ്രദർശനങ്ങൾക്കപ്പുറം പോകാനും ഉപയോക്തൃ അനുഭവങ്ങൾ രൂപപ്പെടുത്താനും കഴിയും, അവ ദൃശ്യപരമായി ആകർഷകമായത് മാത്രമല്ല, ആഗോള സമ്പ്രദായങ്ങളെയും ബഹുമാനിക്കുന്നതുമാണ്. നിങ്ങൾ ധനകാര്യ ഡാറ്റ, സ്കോറുകൾ, അല്ലെങ്കിൽ ഏതെങ്കിലും മറ്റ് സംഖ്യാ വിവരങ്ങൾ ഫോർമാറ്റ് ചെയ്യുകയാണെങ്കിലും, ഈ CSS കഴിവുകൾ മാസ്റ്ററിംഗ് ചെയ്യുന്നത് യഥാർത്ഥ ലോക റെഡി വെബ്സൈറ്റുകൾ നിർമ്മിക്കുന്നതിലേക്ക് ഒരു പ്രധാന ചുവടാണ്.
   
   നിങ്ങളുടെ രൂപകൽപ്പന ഉയർത്താനും നിങ്ങളുടെ നമ്പറുകൾ ലോകത്ത് എവിടെയായിരുന്നാലും ഓരോ ഉപയോക്താവിനും വ്യക്തമായി സംസാരിക്കുന്നുവെന്ന് ഉറപ്പാക്കാനും ഇന്ന് കസ്റ്റം കൗണ്ടർ സ്റ്റൈലുകൾ പരീക്ഷിക്കാൻ ആരംഭിക്കുക.