Command Palette

Search for a command to run...

Guidelines

Interaction Behavior

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

Standardized rules for tactile feedback, touch accessibility, click prevention, and layout solutions for complex Tamil script rendering.

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

1. தொடு இலக்கு அளவுகள் (Touch Target)

தமிழ் வடிவமைப்பு அமைப்பின் அனைத்து ஊடாடும் கூறுகளும் வசதியாக தொடுவதற்கு ஏற்றவாறு இருக்க வேண்டும். சின்னங்கள் சிறியதாக இருந்தாலும் (எ.கா. 20px அல்லது 24px), அதைச் சுற்றியுள்ள தொடும் பரப்பு குறைந்தபட்சம் 48x48px ஆக இருக்க வேண்டும்.

தொடு இலக்கு அளவுகள் (Touch Targets)

தொடு இலக்கின் அளவும் அதன் பாதுகாப்பு இடைவெளியும் பயனர் பிழைகளை எப்படிக் குறைக்கும் என்பதைப் பாருங்கள்

வழிகாட்டுதலுக்கு எதிரானது (24px)

கைபேசியில் விரல்களால் மிகச்சிறிய பொத்தான்களைத் துல்லியமாகத் தொடுவது கடினம். இது தவறான கிளிக்குகளை அதிகரிக்கும்.

வழிகாட்டுதலுக்கு உட்பட்டது (48px)

சின்னம் சிறியதாக இருந்தாலும், அதைச் சுற்றியுள்ள தொடு பகுதி 48x48px ஆக அதிகரிக்கப்பட்டுள்ளது. இதனால் தொடுதல் எளிதாகிறது.

2. இரட்டை அழுத்தத் தடுப்பு (Debounce & W3C States)

பயனர் ஒரு பொத்தானை அழுத்தும்போது பொத்தான் தற்காலிகமாக செயலிழக்கப்பட வேண்டும். W3C WAI-ARIA விதிகளின்படி, இதனைத் திரையில் மட்டும் காட்டாமல் aria-disabled="true" மற்றும் aria-live="polite" ஆகிய பண்புகளைக் கொண்டு நிரல்படுத்த வேண்டும். இது திரை வாசிப்பான்களுக்கு செயல்முறை நடைபெறுகிறது என்பதை உணர்த்தும்.

இரட்டை அழுத்தத் தடுப்பு (Double-Click Prevention)

அதிவேகமாகப் பலமுறை பொத்தானை அழுத்தும்போது கோரிக்கைகள் திரும்பத் திரும்ப அனுப்பப்படுவதைத் தவிர்க்கவும்

தடுப்பு இல்லாதது

பொத்தானை வேகமாக அழுத்தினால் பல பரிவர்த்தனைகள் ஒரே நேரத்தில் பதிவாகும் அபாயம் உண்டு.

பதிவான கிளிக்குகள்: 0
பாதுகாப்பானது

முதல் கிளிக்கிற்குப் பின் பொத்தான் தற்காலிகமாகச் செயலிழக்கப்படும் (Disabled), அதனால் மாற்று அழுத்தங்கள் தடுக்கப்படும்.

கோரிக்கைகள் எதுவும் இல்லை.

3. தமிழ் எழுத்துக்கள் வெட்டப்படுவதைத் தவிர்த்தல்

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

தமிழ் எழுத்து வெட்டுதல் சிக்கல் (Script Clipping Prevention)

தமிழ் எழுத்துக்களின் மேல்/கீழ் குறிகள் (உயிரெழுத்துப் புள்ளிகள், கொம்புகள்) வெட்டுப்படாமல் இருப்பதை உறுதிசெய்தல்

வெட்டுப்படும் எழுத்துக்கள்
பெரியார் ஈ.வெ.ரா நெடுஞ்சாலை

⚠️ மேல் புள்ளிகளும் கீழ் வளைவுகளும் வெட்டுப்பட்டுள்ளன.

சரியான இடைவெளி கொண்ட எழுத்துக்கள்
பெரியார் ஈ.வெ.ரா நெடுஞ்சாலை

✅ உயரமான மற்றும் ஆழமான தமிழ் எழுத்துக்கள் முழுமையாகத் தெரிகின்றன.

எழுத்து வடிவ இடைவெளி வழிகாட்டி

  • நிலையான உயரங்களைத் தவிர்க்கவும்: உரையைக் கொண்ட கூறுகளுக்கு நிலையான உயரங்களைப் (`h-8`, `h-10`) பயன்படுத்த வேண்டாம். அதற்குப் பதிலாக `h-fit` அல்லது `min-h-*` மற்றும் செங்குத்து திண்டு இடைவெளிகளைப் (`py-2`, `py-3`) பயன்படுத்தவும்.
  • பாதுகாப்பான வரி இடைவெளி: தமிழ் எழுத்துருக்களைப் பயன்படுத்தும்போது குறைந்தபட்சம் leading-relaxed அல்லது leading-loose இடைவெளியை உறுதிசெய்யவும்.

4. நீளமான சொற்கள் மற்றும் வழிமுறைகள் (Overflow)

நீள உரை மற்றும் லேபிள்கள்

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

  • அடுத்த வரிசைக்கு மாற்றுதல்: எழுத்துக்கள் வெட்டப்படுவதை விட, அவை தானாக அடுத்த வரிசைக்கு (`text-wrap` அல்லது `whitespace-normal`) மாறுவதை முதன்மைப்படுத்தவும்.
  • கருவிக்குறிப்பு (Tooltip - WAI-ARIA): இடம் மிகக் குறைவாக இருக்கும்போது `truncate` முறையைப் பயன்படுத்தி உரையைச் சுருக்கி, Tooltip அமைப்பைப் பயன்படுத்த வேண்டும். W3C விதிகளின்படி இதில் role="tooltip" மற்றும் aria-describedby" கட்டாயம் இருக்க வேண்டும்.