text-box-trim ಎಂಬ ಹೊಸ CSS ಪ್ರಾಪರ್ಟಿಯು ಈಗಾಗಲೇ ಅದನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲಭ್ಯವಾಗಿದೆ. ಇದು ವರ್ಷಗಳಿಂದ UI ಕೆಲಸಗಳಲ್ಲಿ ಒಂದು ಮುಖ್ಯ ಭಾಗವಾಗಿದ್ದ line-height ಹೊಂದಾಣಿಕೆಯ ಸಂಕೀರ್ಣತೆಗಳನ್ನು (gymnastics) ನಿವಾರಿಸಲು ಅಭಿವೃದ್ಧಿಪಡಿಸಲಾಗಿದೆಯಾಗಿದೆ. ಅಕ್ಷರಗಳ cap height ಗಿಂತ ಮೇಲಿರುವ ಮತ್ತು baseline ಗಿಂತ ಕೆಳಗಿರುವ ಅದೃಶ್ಯ padding ಅನ್ನು ಕಡಿತಗೊಳಿಸುವ ಮೂಲಕ, ಈ ಪ್ರಾಪರ್ಟಿಯು ಲಂಬ ಪಠ್ಯ ಜೋಡಣೆಯನ್ನು (vertical text alignment) ಅಗಲ (width) ಅಥವಾ ಬಣ್ಣವನ್ನು (color) ನಿಗದಿಪಡಿಸಿದಷ್ಟೇ ನಿಖರವಾಗಿಸುತ್ತದೆ.

ಈ ಸಮಸ್ಯೆಯ ಪ್ರಾಮುಖ್ಯತೆ ಏಕೆ?

ಪ್ರತಿಯೊಂದು ಟೈಪ್‌ಫೇಸ್ ಕೂಡ "ghost" space ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ: ಅಂದರೆ ಎತ್ತರದ ಕ್ಯಾಪಿಟಲ್ ಅಕ್ಷರಗಳಿಗಿಂತ ಕೆಲವು ಪಿಕ್ಸೆಲ್ ಮೇಲಿರುತ್ತದೆ ಮತ್ತು ಅಕ್ಷರಗಳು ಕುಳಿತಿರುವ ಲೈನ್‌ನಿಂದ ಕೆಲವು ಪಿಕ್ಸೆಲ್ ಕೆಳಗಿರುತ್ತದೆ. ಆ ಸ್ಥಳವು ಅದೃಶ್ಯವಾಗಿರುತ್ತದೆ, ಆದರೆ ಅದು ಬಟನ್‌ನ ಲೇಬಲ್ ಅನ್ನು ಮೇಲಕ್ಕೆ ಅಥವಾ ಕೆಳಕ್ಕೆ ತಳ್ಳುತ್ತದೆ, ಹೆಡಿಂಗ್ ಅನ್ನು ಐಕಾನ್‌ನ ಅಂಚಿನಿಂದ ದೂರ ಮಾಡುತ್ತದೆ ಮತ್ತು ವಿನ್ಯಾಸಕರು ಇದನ್ನು ಸರಿದೂಗಿಸಲು "magic numbers" ಅನ್ನು ಬಳಸುವಂತೆ ಮಾಡುತ್ತದೆ. ಬ್ರೌಸರ್ ನೇರವಾಗಿ padding ಅನ್ನು ತೆಗೆದುಹಾಕಲು ದಾರಿ ನೀಡದ ಕಾರಣ, ತಂಡಗಳು ಈ ಹೊಂದಾಣಿಕೆಗಳ ಸುತ್ತವೇ ಇಡೀ ಸ್ಪೇಸಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳನ್ನು—design tokens, utility classes ಮತ್ತು component libraries—ನಿರ್ಮಿಸಿವೆ.

ಹಳೆಯ ಪರಿಹಾರಗಳು

text-box-trim ಬರುವ ಮೊದಲು, ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ:

  • ಹೆಚ್ಚುವರಿ ಸ್ಥಳವನ್ನು ಸಮತೋಲನಗೊಳಿಸಲು ಕಸ್ಟಮ್ line-height ಅನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತಿದ್ದರು.
  • ಪಠ್ಯವನ್ನು ಮೇಲಕ್ಕೆ ಅಥವಾ ಕೆಳಕ್ಕೆ ಎಳೆಯಲು নেತಿবাচক ಮಾರ್ಜಿನ್‌ಗಳನ್ನು (negative margins) ಬಳಸುತ್ತಿದ್ದರು.
  • ಡಿಸೈನ್ ಫೈಲ್‌ಗಳಿಂದ ಸಂಖ್ಯೆಗಳನ್ನು ಕಾಪಿ ಮಾಡಿ CSS ನಲ್ಲಿ ಹಾರ್ಡ್-ಕೋಡ್ ಮಾಡುತ್ತಿದ್ದರು.

ಈ ತಂತ್ರಗಳು ಕೆಲಸ ಮಾಡುತ್ತವೆ, ಆದರೆ ಅವು ಅಸ್ಥಿರವಾಗಿವೆ (fragile). ಫಾಂಟ್, ತೂಕ (weight) ಅಥವಾ ಭಾಷೆಯನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಈ ಸಂಖ್ಯೆಗಳು ತಪ್ಪಾಗಿ ಅಳವಡಿಕೆಯಾಗುತ್ತವೆ, ಇದು UI ಎಲಿಮೆಂಟ್‌ಗಳ ತಪ್ಪಾದ ಜೋಡಣೆಗೆ ಮತ್ತು ಕೋಡ್ ಬೇಸ್‌ನಲ್ಲಿ ನಿರ್ವಹಣೆಯ ಹೊರೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

text-box-trim ಹೇಗೆ ಬದಲಾವಣೆ ತರುತ್ತದೆ

text-box-trim ಎಂಬುದು ಪಠ್ಯದ ಬಾಕ್ಸ್ ಅನ್ನು ಅಸಲಿ glyph bounds ಗೆ ಕತ್ತರಿಸಲು ಬ್ರೌಸರ್ ಸೂಚಿಸುತ್ತದೆ. ಈ ಪ್ರಾಪರ್ಟಿಯು ಯಾವ ಅಂಚುಗಳನ್ನು ಕತ್ತರಿಸಬೇಕು ಎಂದು ನಿರ್ಧರಿಸುವ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಮತ್ತು ಅದರ ಜೊತೆಗಿನ text-box-edge ಎಂಬುದು cap height ಗಾಗಿ ರೆಫರೆನ್ಸ್ ಅಂಚನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಪ್ರಾಯೋಗಿಕವಾಗಿ:

button { text-box-trim: both; text-box-edge: cap; }

ಇದು ಬಾಕ್ಸ್‌ನ ಮೇಲ್ಭಾಗವನ್ನು cap height ನಲ್ಲಿ ಮತ್ತು ಕೆಳಭಾಗವನ್ನು alphabetic baseline ನಲ್ಲಿ ನಿಗದಿಪಡಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಅನಗತ್ಯ padding ಅನ್ನು ತೆಗೆದುಹಾಕಬಹುದು. ಇದರ ಪರಿಣಾಮವಾಗಿ, ಲೈನ್ ಬಾಕ್ಸ್ವು ದೃಶ್ಯಮಾನ ಅಕ್ಷರಗಳಿಗೆ ನಿಖರವಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಲೆಕ್ಕಾಚಾರಗಳಿಲ್ಲದೆ ಲಂಬ ಕೇಂದ್ರೀಕರಣ (vertical centering) ಕೆಲಸ ಮಾಡುತ್ತದೆ ಮತ್ತು ಐಕಾನ್‌ಗಳು ಅಕ್ಷರಗಳೊಂದಿಗೆ ಸಮನಾಗಿ ಜೋಡಣೆಯಾಗುತ್ತವೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ – ಇನ್ನೂ ಆರಂಭಿಕ ಹಂತದಲ್ಲಿದೆ, ಆದರೆ ಬೆಳೆಯುತ್ತಿದೆ

ಪ್ರಸ್ತುತ ಬೆಂಬಲವು ಕೇವಲ ಕೆಲವು ಬ್ರೌಸರ್ಸ್‌ಗಳಿಗೆ ಸೀಮಿತವಾಗಿದೆ, ಅವು ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಪ್ರಾಯೋಗಿಕ ಫ್ಲಾಗ್‌ಗಳ (experimental flags) ಮೂಲಕ ಅಥವಾ ತಮ್ಮ ಇತ್ತೀಚಿನ ಬಿಡುಗಡೆಗಳಲ್ಲಿ ನೀಡುತ್ತಿವೆ. ಹೆಚ್ಚಿನ ಪ್ರೊಡಕ್ಷನ್ ಪರಿಸರಗಳು ಇನ್ನೂ ಸಾಂಪ್ರದಾಯಿಕ ರೆಂಡರಿಂಗ್ ಪಥವನ್ನೇ ಅನುಸರಿಸುತ್ತವೆ, ಅಂದರೆ ಡೆವಲಪರ್‌ಗಳು 'graceful degradation' ತಂತ್ರವನ್ನು ಹೊಂದಿರಬೇಕಾಗುತ್ತದೆ. ಒಳ್ಳೆಯ ವಿಷಯವೆಂದರೆ, ಇದನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್ಸ್‌ಗಳು ಇದರ ಅನುಷ್ಠಾನವು ಸ್ಥಿರವಾಗಿದೆ ಎಂದು ಈಗಾಗಲೇ ತೋರಿಸಿವೆ ಮತ್ತು ಈ ಸ್ಪೆಸಿಫಿಕೇಶನ್ ಅನ್ನು ಮುಖ್ಯವಾಹಿನಿಯ ಬಳಕೆಗೆ ಅನುಮೋದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ವ್ಯಾಪಕವಾದ ಬಿಡುಗಡೆಯು ಹತ್ತಿರದಲ್ಲಿದೆ.

ಇದರಿಂದ ಆಗುವ ಪ್ರಯೋಜನಗಳು

ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ ಸಾಧ್ಯವಿರುವ ಕಡೆಗಳಲ್ಲಿ text-box-trim ಅನ್ನು ಅಳವಡಿಸಿಕೊಂಡರೆ, ತಕ್ಷಣದ ಪ್ರಯೋಜನವೆಂದರೆ ಸ್ವಚ್ಛವಾದ ಸ್ಟೈಲ್‌ಶೀಟ್ (stylesheet). ಇನ್ನು ಮುಂದೆ ಕಸ್ಟಮ್ line-height ಫಾರ್ಮುಲಾಗಳು, নেತಿবাচক ಮಾರ್ಜಿನ್‌ಗಳು ಅಥವಾ ಕೇವಲ ಅದೃಶ್ಯ ಸ್ಥಳವನ್ನು ಸರಿದೂಗಿಸಲು ಇರುವ design-token ಎಂಟ್ರಿಗಳ ಅಗತ್ಯವಿಲ್ಲ. ದೀರ್ಘಾವಧಿಯಲ್ಲಿ, ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ಗಳನ್ನು ಸರಳಗೊಳಿಸಬಹುದು: ಒಂದೇ ಒಂದು "text baseline" ಟೋಕನ್ ಹಲವಾರು "vertical-offset" ಮೌಲ್ಯಗಳ ಬದಲಿಗೆ ಬರಬಹುದು ಮತ್ತು UI ಘಟಕಗಳು (components) ಫಾಂಟ್ ಬದಲಾವಣೆಗಳಿಗೆ ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕತ್ವವನ್ನು (resilient) ಹೊಂದುತ್ತವೆ.

ಹಳೆಯ ಹ್ಯಾಕ್‌ಗಳಲ್ಲಿ ಈಗಾಗಲೇ ಹೆಚ್ಚಿನ ಹೂಡಿಕೆ ಮಾಡಿದ ತಂಡಗಳಿಗೆ, ಬದಲಾಗುವ ವೆಚ್ಚವು ಅತಿ ಹೆಚ್ಚಿಲ್ಲ. ಏಕೆಂದರೆ ಈ ಪ್ರಾಪರ್ಟಿ ಬಾಕ್ಸ್-ಮಾಡಲ್ ಮಟ್ಟದಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ನೀವು ಇದನ್ನು ಕೇವಲ ಒಂದು ಘಟಕದ ಮೇಲೆ—ಉದಾಹರಣೆಗೆ, ಸರಿಯಾಗಿ ಕಾಣದ ಬಟನ್ ಲೇಬಲ್ ಮೇಲೆ—ಅನ್ವಯಿಸಬಹುದು ಮತ್ತು ಉಳಿದ ಲೇಔಟ್ ಅನ್ನು ಮುಟ್ಟದೆಯೇ ಅಂತರವು ಮಾಯವಾಗುವುದನ್ನು ನೋಡಬಹುದು. ಈ ಹಂತ ಹಂತದ ವಿಧಾನವು ಪೂರ್ಣ ಪ್ರಮಾಣದ ಬದಲಾವಣೆಗೆ ಬದ್ಧರಾಗುವ ಮೊದಲು ಇದರ ಪ್ರಯೋಜನವನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಸವಾಲುಗಳು

ಅಸಮತೋಲಿತ ಬ್ರೌಸರ್ ಕವರೇಜ್ ದೊಡ್ಡ ಅಡೆತಡೆಯಾಗಿದೆ. ಬಳಕೆದಾರರ ಬ್ರೌಸರ್‌ನಲ್ಲಿ text-box-trim ಇಲ್ಲದಿದ್ದರೆ, ಪಠ್ಯವು ಡಿಫಾಲ್ಟ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್‌ಗೆ ಮರಳುತ್ತದೆ ಮತ್ತು ಮತ್ತೆ "ghost padding" ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಆದ್ದರಿಂದ ಡೆವಲಪರ್‌ಗಳು ಬೆಂಬಲವಿಲ್ಲದ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ line-height ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವಂತಹ 'fallback strategy' ಅನ್ನು ಒದಗಿಸಬೇಕು. ಟೂಲ್‌ಚೇನ್‌ಗಳು (build pipelines, CSS-in-JS libraries, design-token generators) ಕೂಡ ಈ ಹೊಸ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಗುರುತಿಸಬೇಕಾಗುತ್ತದೆ; ಅವು ಮಾಡುವವರೆಗೆ, ಸ್ವಯಂಚಾಲಿತ ಸ್ಟೈಲ್ ಆಡಿಟ್‌ಗಳಲ್ಲಿ ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ನಿರ್ಲಕ್ಷಿಸಬಹುದು.

ಮುಂದೆ ಗಮನಿಸಬೇಕಾದವುಗಳು

  • ಬ್ರೌಸರ್ ಬಿಡುಗಡೆಗಳು (Browser releases): ಪ್ರಮುಖ ಬ್ರೌಸರ್ಗಳು ಯಾವಾಗ text-box-trim ಅನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಗಮನಿಸುತ್ತಿರಿ.
  • ಡಿಸೈನ್-ಸಿಸ್ಟಮ್ ಅಪ್‌ಡೇಟ್‌ಗಳು (Design-system updates): ಟೋಕನ್ ಲೈಬ್ರರಿಗಳನ್ನು ನಿರ್ವಹಿಸುವ ತಂಡಗಳು ಪ್ರಸ್ತುತ ಇರುವ "vertical-offset" ಟೋಕನ್‌ಗಳ ಬದಲಿಗೆ "baseline" ಟೋಕನ್ ಅನ್ನು ಯೋಜಿಸಲು ಪ್ರಾರಂಭಿಸಬೇಕು.
  • ಟೂಲಿಂಗ್ (Tooling): CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಮತ್ತು ಲಿಂಟಿಂಗ್ ಟೂಲ್‌ಗಳು ಈ ಪ್ರಾಪರ್ಟಿಗೆ ಬೆಂಬಲ ನೀಡಲು ಪ್ರಾರಂಭಿಸುತ್ತಿವೆ; ಅವುಗಳನ್ನು ಮೊದಲೇ ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದು ಸುಗಮ ಪರಿವರ್ತನೆಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಅಂತಿಮವಾಗಿ

text-box-trim ಕೊನೆಗೂ ವರ್ಷಗಳಿಂದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಗೊಂದಲಕ್ಕೀಡು ಮಾಡುತ್ತಿದ್ದ ಅಡ್ಡಹಾದಿ ಅಥವಾ ಅಸ್ಥಿರ ಪರಿಹಾರಗಳಿಲ್ಲದೆ, ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲು ವೆಬ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗೆ ಒಂದು ನೈಸರ್ಗಿಕ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ಆರಂಭಿಕ ಬಳಕೆದಾರರು ಒಂದು ಘಟಕವನ್ನು (component) ಸುಗಮಗೊಳಿಸಿ, ದೃಶ್ಯ ಸುಧಾರಣೆಯನ್ನು ಸಾಬೀತುಪಡಿಸಬಹುದು ಮತ್ತು ಬ್ರೌಸರ್ ಬೆಂಬಲ ಹೆಚ್ಚಾದಂತೆ ಅದರ ಬಳಕೆಯನ್ನು ವಿಸ್ತರಿಸಬಹುದು. ಬ್ರೌಸರ್ ಈಗ ಪರಿಹರಿಸಲು ಸಿದ್ಧವಾಗಿರುವ ಸಮಸ್ಯೆಗೆ, ಅಸ್ಥಿರವಾದ ಕೋಡ್ ಅನ್ನು ಬರೆಯುವುದನ್ನು ಮತ್ತು ನಿರ್ವಹಿಸುವುದನ್ನು ಮುಂದುವರಿಸುವುದು ಎಂದರ್ಥ.