Guidelines
Adaptive Layouts
தகவமைப்பு வடிவமைப்பு
Tamil DS layout rules define how components scale and reposition dynamically across mobile, tablet, and desktop screens. It guarantees legibility of Tamil script and structural stability.
சாதனங்களின் திரைகளுக்கு ஏற்ப பக்க அமைப்புகளும் தகவல்களும் மாறும் தன்மைகளை வரையறுக்கும் வழிகாட்டி.
நெகிழ்வான வடிவமைப்பு மாதிரி
சாதன அகலங்கள் கைபேசி (Mobile), மாத்திரை (Tablet) மற்றும் கணினி (Desktop) ஆகியவற்றிற்கு இடையே மாறும்போது வழிசெலுத்தல் அமைப்புகளும் தகவல்களும் எவ்வாறு மாறுகின்றன என்பதை மேலே உள்ள மாதிரி மூலம் சரிபார்க்கவும்.
சாதன அகலங்களின் அளவீடுகள் (Breakpoints)
தமிழ் வடிவமைப்பு அமைப்பு (TamilDS) வெவ்வேறு திரை அகலங்களுக்கு ஏற்ப சிறந்த பயனர் அனுபவத்தை உறுதிசெய்ய கீழ்வரும் சாதன பிரிவுகளைப் பயன்படுத்துகிறது.
கைப்பேசி (Mobile)
- அளவு
- 0px - 599px
- கட்டம்
- 4 Columns
- இடைவெளி
- 16px (1rem)
- வழிசெலுத்தல்
- கீழ் வழிசெலுத்தல் பட்டி (Bottom Nav)
மாத்திரை (Tablet)
- அளவு
- 600px - 839px
- கட்டம்
- 8 Columns
- இடைவெளி
- 24px (1.5rem)
- வழிசெலுத்தல்
- குறுகிய பக்க பட்டி (Nav Rail)
கணினி (Desktop)
- அளவு
- 840px - 1199px
- கட்டம்
- 12 Columns
- இடைவெளி
- 24px (1.5rem)
- வழிசெலுத்தல்
- விரிவான பக்க பட்டி (Nav Drawer)
பெரிய கணினி (Large Desktop)
- அளவு
- 1200px+
- கட்டம்
- 12 Columns
- இடைவெளி
- 24px (1.5rem)
- வழிசெலுத்தல்
- நிலையான இடது பக்க பட்டி (Permanent Drawer)
கட்டமைப்புக் காட்சி (Grid columns)
அட்டவணையின் ஓரங்கள் (Margins) மற்றும் நெடுவரிசைகளுக்கு இடையே உள்ள இடைவெளிகள் (Gutters) திரைக்கு ஏற்ப எவ்வாறு மாறுகின்றன என்பதைத் தேர்வு செய்து பார்க்கவும்.
வடிவமைப்பு மற்றும் அமுலாக்க விதிகள்
1. ஒட்டும் இடது பலகை + நகரும் வலது பகுதி (Sticky-Left + Scrolling-Right)
வடிவமைப்பு பக்கங்கள் அல்லது உள்ளீட்டு பலகைகளை வைக்கும் போது, இரு பகுதிகளையும் நிலையான பக்கவாட்டு நெடுவரிசைகளாக வைக்கக் கூடாது. இது ஒரு பகுதி முடிந்து மற்ற பகுதி மட்டும் நீண்டு செல்லும்போது வெற்று இடத்தை உருவாக்குகிறது.
சிறந்த வழி: இடது கட்டுப்பாட்டு பலகையை `lg:sticky lg:top-20 lg:self-start` முறையில் அமைக்கவும். இது வலது பகுதி நகரும்போது இடது கட்டுப்பாட்டு பகுதி திரையிலேயே ஒட்டி இருக்கச் செய்யும்.
2. திரையை மீறும் கூறுகளைத் தவிர்த்தல் (No Overflow Hacks)
திரையை மீறி வெளியேறும் சிக்கல்களுக்கு `overflow-x-auto` என்ற தற்காலிக தீர்வை மட்டும் பயன்படுத்த வேண்டாம். அதற்குப் பதிலாக, வெளியேறும் கூறுகளின் அகலத்தை சரியாக அமைத்தல் (`w-full min-w-0`) அல்லது சொற்களை அடுத்த வரிசைக்கு மாற்றுதல் போன்ற சரியான வழிமுறைகளைப் பயன்படுத்தவும்.
3. வளைவு ஆரங்களின் விதிகள் (Radii Standards)
- மிகச்சிறிய கட்டுப்பாடுகள் (உதாரணமாக: செக்பாக்ஸ், உள்ளீட்டு பெட்டிகள்):
rounded-sm. - நிலையான தகவலடங்கிய பெட்டிகள் (உதாரணமாக: அட்டைகள், மெனுக்கள், மாடல்கள்):
rounded-md. - வட்ட வடிவிலான தேர்வுகள் (உதாரணமாக: சுவிட்சுகள், அவதாரங்கள், ஸ்டேடஸ் புள்ளிகள்):
rounded-full.
4. WCAG மறுசீரமைப்பு விதிகள் (Reflow 1.4.10)
திரையை 400% பெரிதாக்கினாலும் (320px அகலம்) உள்ளடக்கம் கிடைமட்டமாக (horizontal) ஸ்க்ரோல் ஆகாமல் தெரிய வேண்டும். கட்டமைப்புகள் தானாகவே ஒற்றை நெடுவரிசையாக மாற வேண்டும். எழுத்துக்கள் மற்றும் இடைவெளிகளுக்கு நிலையான பிக்சல்களுக்கு (px) பதிலாக rem அல்லது em அளவுகளைப் பயன்படுத்தவும்.
5. W3C சொற்பொருள் அடையாளங்கள் (Semantic Landmarks)
முழுத் தளத்தையும் வெறும் <div> குறிகளைக் கொண்டு வடிவமைக்க வேண்டாம். திரை வாசிப்பான்கள் தளத்தின் அமைப்பைப் புரிந்துகொள்ள W3C HTML5 அடையாள குறிகள் அவசியம்:
- பக்கப் பட்டி (Sidebar):
<aside>அல்லது<nav aria-label="...">குறிகளுக்குள் இருக்க வேண்டும். - முக்கிய உள்ளடக்கம்: ஒரு பக்கத்திற்கு ஒரு
<main>குறிச்சொல் மட்டுமே இருக்க வேண்டும். - மேற்பட்டி (Top bar):
<header>குறிச்சொல்லுக்குள் அமைய வேண்டும்.