වෙබ් අතුරුමුහුණත සැලසුම් කරන විට, ශීර්ෂ පදය අවසානයේ එක වචනය තනි රේඛාවක පෙනීම (orphan word) බොහෝ විට අප්රසන්නයි. බ්රවුසරය ඉඩ අවසන් වීම නිසා වචනය කඩාවැටෙයි, පරිශීලකයාට අසාධාරණ දෘශ්යයක් දක්වයි.
ඇතිවූ මෙම ගැටලුව නිරාකරණය කිරීමට, සංවර්ධකයින් පළමුවෙන් වචනය කෙටි කරන්නේ, max-width අගය වෙනස් කරන්නේ, හෝ <br> ටැගයක් දමා රේඛාව බෙදන්නේ. නමුත් මෙම විසඳුම් එක් විශාල පරාසයක පමණක් වැඩ කරයි; වෙනත් වින්ඩෝ ප්රමාණයක එය නැවත වැරදි තත්වයට පත් වේ.
මෙම ගැටලුවට නව, ස්වභාවික විසඳුම text-wrap: balance ගුණයයි. මෙම CSS ගුණය බ්රවුසරයට පේළි අතර අක්ෂර ව්යාප්තිය සමබර ලෙස බෙදා හරින ලෙස කියයි, එවිට එක් පේළිය අතිශය දිගු වීමක් හෝ තනි වචනයක් පෙනීමක් නොවේ.
h1, h2, h3 { text-wrap: balance; }
මෙම ක්රමය තනි වචන ඉතිරි වීම (orphan) ඉවත් කරයි, <br> හෝ max-width වැනි අමතර සැකසුම් අවශ්ය නොවේ. නමුත් එය කෙටි අන්තර්ගතයන්ට පමණක් සීමා කරයි; බ්රවුසරය සෑම පේළියක්ම පරීක්ෂා කිරීම සඳහා අධික ගණනයක් කරන්නේ නැත.
දිගු පෙළ සඳහා text-wrap: pretty ගුණය භාවිතා කළ හැක. එය අවසාන පේළියේ තනි වචනයක් ඉතිරි වීම පමණක් සකසා, මධ්ය පේළිවලට බලපාන්නේ නැත.
p, li, blockquote { text-wrap: pretty; }
ඉදිරිපත් කර ඇති නිර්දේශිත සෙට් එක මෙසේය:
- h1–h6 { text-wrap: balance; }
- p, li, figcaption, blockquote { text-wrap: pretty; }
පෙර භාවිතා වූ <br> ටැග්, soft‑hyphen, max‑width, JavaScript‑based rebalancer වැනි ක්රමයන් සියල්ලටම වඩා, text-wrap: balance සහ pretty බ්රවුසරයේ ලේඛන සැකසීමේ අවස්ථාවේම නිවැරදිව ක්රියාත්මක වේ.
උදාහරණයක් ලෙස, වෙළඳ පිටුවක කාඩ් එකක් ගැන සිතන්න: <h2>Automate Your Deployment Pipeline Without the Overhead</h2> යන ශීර්ෂය කාඩ් එකේ පළල කුමන වුවත් සමාන පේළි දිගකින් පෙනේ, එමඟින් පරිශීලකයාට පටන් ගත හැකි, වෘත්තීයමය අත්දැකීමක් ලැබේ.
අවසානයේ, text-wrap ගුණය වෙබ් අඩවි නිර්මාණයේ සුළු නඩුවක් පමණක් නොව, අඩවියේ ගුණාත්මකත්වය, SEO සහ පරිශීලක අත්දැකීම උසස් කිරීමට දායක වේ. ඔබේ අඩවියේ ශීර්ෂ පද හා උපුටා ගැනීම් සඳහා මෙය අත්හදා බලන්න.
