ಸಿಎಸ್ಎಸ್ ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಮೂಲಕ ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಿ. ಇದು ಜಾಗತಿಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
ಸಿಎಸ್ಎಸ್ ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್: ಜಾಗತಿಕ ವೆಬ್ಗಾಗಿ ರೈಟಿಂಗ್ ಮೋಡ್-ಅವೇರ್ ಲೇಔಟ್ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು
ವೆಬ್ ಒಂದು ಜಾಗತಿಕ ವೇದಿಕೆಯಾಗಿದೆ, ಮತ್ತು ಡೆವಲಪರ್ಗಳಾಗಿ, ಜಗತ್ತಿನಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಸುಲಭವಾಗಿ ಮತ್ತು ಸಹಜವಾಗಿ ಬಳಸಲು ಅನುಭವಗಳನ್ನು ರಚಿಸುವ ಜವಾಬ್ದಾರಿ ನಮ್ಮ ಮೇಲಿದೆ. ಇದನ್ನು ಸಾಧಿಸುವ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ಸಿಎಸ್ಎಸ್ ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಬಳಸುವುದು, ಇದು ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕುಗಳಿಗೆ ಸರಾಗವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ವಿಧಾನವು ಕೇವಲ ಭೌತಿಕ ಪ್ರಾಪರ್ಟಿಗಳ (top, right, bottom, left) ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ದೃಢವಾಗಿದೆ, ಏಕೆಂದರೆ ಅವು ದಿಕ್ಕನ್ನು ಅವಲಂಬಿಸಿರುತ್ತವೆ.
ಭೌತಿಕ ಮತ್ತು ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಸಾಂಪ್ರದಾಯಿಕ ಸಿಎಸ್ಎಸ್ ಭೌತಿಕ ಪ್ರಾಪರ್ಟಿಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ, ಇದು ಭೌತಿಕ ಸ್ಕ್ರೀನ್ ಅಥವಾ ಸಾಧನದ ಆಧಾರದ ಮೇಲೆ ಸ್ಥಾನೀಕರಣ ಮತ್ತು ಗಾತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, margin-left
ಪಠ್ಯದ ದಿಕ್ಕನ್ನು ಲೆಕ್ಕಿಸದೆ ಎಲಿಮೆಂಟ್ನ ಎಡಭಾಗಕ್ಕೆ ಮಾರ್ಜಿನ್ ಸೇರಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಎಡದಿಂದ-ಬಲಕ್ಕೆ ಓದುವ ಭಾಷೆಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಅರೇಬಿಕ್ ಅಥವಾ ಹೀಬ್ರೂನಂತಹ ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳು ಅಥವಾ ಪೂರ್ವ ಏಷ್ಯಾದ ಭಾಷೆಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಕಂಡುಬರುವ ಲಂಬವಾದ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
ಮತ್ತೊಂದೆಡೆ, ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್, ರೈಟಿಂಗ್ ಮೋಡ್ ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕಿಗೆ ಸಂಬಂಧಿಸಿದ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುತ್ತದೆ. margin-left
ಬದಲಿಗೆ, ನೀವು margin-inline-start
ಬಳಸುತ್ತೀರಿ. ಬ್ರೌಸರ್ ನಂತರ ಪ್ರಸ್ತುತ ರೈಟಿಂಗ್ ಮೋಡ್ ಮತ್ತು ದಿಕ್ಕಿನ ಆಧಾರದ ಮೇಲೆ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಯಾಗಿ ಅರ್ಥೈಸುತ್ತದೆ. ಇದು ಬಳಸುತ್ತಿರುವ ಭಾಷೆ ಅಥವಾ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ ಮಾರ್ಜಿನ್ ಎಲಿಮೆಂಟ್ನ ಸೂಕ್ತ ಬದಿಯಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು: ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕು
ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳ ವಿವರಗಳಿಗೆ ಹೋಗುವ ಮೊದಲು, ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕು ಎಂಬ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾಗಿದೆ.
ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು
writing-mode
ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟಿಯು ಪಠ್ಯದ ಸಾಲುಗಳನ್ನು ಹೇಗೆ ಜೋಡಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಮೌಲ್ಯಗಳು:
horizontal-tb
: ಪ್ರಮಾಣಿತ ಅಡ್ಡ, ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ ಬರೆಯುವ ಮೋಡ್ (ಉದಾಹರಣೆಗೆ, ಇಂಗ್ಲಿಷ್, ಸ್ಪ್ಯಾನಿಷ್).vertical-rl
: ಲಂಬ, ಬಲದಿಂದ-ಎಡಕ್ಕೆ ಬರೆಯುವ ಮೋಡ್ (ಸಾಂಪ್ರದಾಯಿಕ ಚೈನೀಸ್ ಮತ್ತು ಜಪಾನೀಸ್ನಲ್ಲಿ ಸಾಮಾನ್ಯ).vertical-lr
: ಲಂಬ, ಎಡದಿಂದ-ಬಲಕ್ಕೆ ಬರೆಯುವ ಮೋಡ್.
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳು writing-mode: horizontal-tb
ಅನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ.
ಪಠ್ಯದ ದಿಕ್ಕು
direction
ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟಿಯು ಇನ್ಲೈನ್ ಕಂಟೆಂಟ್ ಹರಿಯುವ ದಿಕ್ಕನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿರಬಹುದು:
ltr
: ಎಡದಿಂದ-ಬಲಕ್ಕೆ (ಉದಾಹರಣೆಗೆ, ಇಂಗ್ಲಿಷ್, ಫ್ರೆಂಚ್). ಇದು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿದೆ.rtl
: ಬಲದಿಂದ-ಎಡಕ್ಕೆ (ಉದಾಹರಣೆಗೆ, ಅರೇಬಿಕ್, ಹೀಬ್ರೂ).
direction
ಪ್ರಾಪರ್ಟಿಯು ಪಠ್ಯ ಮತ್ತು ಇನ್ಲೈನ್ ಎಲಿಮೆಂಟ್ಗಳ *ದಿಕ್ಕನ್ನು* ಮಾತ್ರ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ, ಒಟ್ಟಾರೆ ಲೇಔಟ್ ಮೇಲೆ ಅಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸುವುದು ಮುಖ್ಯ. writing-mode
ಪ್ರಾಪರ್ಟಿಯು ಮುಖ್ಯವಾಗಿ ಲೇಔಟ್ನ ದಿಕ್ಕನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳು: ಒಂದು ಸಮಗ್ರ ಅವಲೋಕನ
ಪ್ರಮುಖ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಮತ್ತು ಅವುಗಳು ತಮ್ಮ ಭೌತಿಕ ಸಮಾನತೆಗಳಿಗೆ ಹೇಗೆ ಸಂಬಂಧಿಸಿವೆ ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸೋಣ:
ಮಾರ್ಜಿನ್ಗಳು
margin-block-start
:horizontal-tb
ನಲ್ಲಿmargin-top
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ, ಮತ್ತು ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಲ್ಲಿmargin-right
ಅಥವಾmargin-left
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.margin-block-end
:horizontal-tb
ನಲ್ಲಿmargin-bottom
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ, ಮತ್ತು ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಲ್ಲಿmargin-right
ಅಥವಾmargin-left
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.margin-inline-start
:ltr
ದಿಕ್ಕಿನಲ್ಲಿmargin-left
ಗೆ ಮತ್ತುrtl
ದಿಕ್ಕಿನಲ್ಲಿmargin-right
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.margin-inline-end
:ltr
ದಿಕ್ಕಿನಲ್ಲಿmargin-right
ಗೆ ಮತ್ತುrtl
ದಿಕ್ಕಿನಲ್ಲಿmargin-left
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.
ಪ್ಯಾಡಿಂಗ್
padding-block-start
:horizontal-tb
ನಲ್ಲಿpadding-top
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ, ಮತ್ತು ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಲ್ಲಿpadding-right
ಅಥವಾpadding-left
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.padding-block-end
:horizontal-tb
ನಲ್ಲಿpadding-bottom
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ, ಮತ್ತು ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಲ್ಲಿpadding-right
ಅಥವಾpadding-left
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.padding-inline-start
:ltr
ದಿಕ್ಕಿನಲ್ಲಿpadding-left
ಗೆ ಮತ್ತುrtl
ದಿಕ್ಕಿನಲ್ಲಿpadding-right
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.padding-inline-end
:ltr
ದಿಕ್ಕಿನಲ್ಲಿpadding-right
ಗೆ ಮತ್ತುrtl
ದಿಕ್ಕಿನಲ್ಲಿpadding-left
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.
ಬಾರ್ಡರ್ಗಳು
border-block-start
,border-block-start-width
,border-block-start-style
,border-block-start-color
:horizontal-tb
ನಲ್ಲಿ ಮೇಲಿನ ಬಾರ್ಡರ್ಗೆ ಸಂಬಂಧಿಸಿರುತ್ತವೆ.border-block-end
,border-block-end-width
,border-block-end-style
,border-block-end-color
:horizontal-tb
ನಲ್ಲಿ ಕೆಳಗಿನ ಬಾರ್ಡರ್ಗೆ ಸಂಬಂಧಿಸಿರುತ್ತವೆ.border-inline-start
,border-inline-start-width
,border-inline-start-style
,border-inline-start-color
:ltr
ನಲ್ಲಿ ಎಡ ಬಾರ್ಡರ್ಗೆ ಮತ್ತುrtl
ನಲ್ಲಿ ಬಲ ಬಾರ್ಡರ್ಗೆ ಸಂಬಂಧಿಸಿರುತ್ತವೆ.border-inline-end
,border-inline-end-width
,border-inline-end-style
,border-inline-end-color
:ltr
ನಲ್ಲಿ ಬಲ ಬಾರ್ಡರ್ಗೆ ಮತ್ತುrtl
ನಲ್ಲಿ ಎಡ ಬಾರ್ಡರ್ಗೆ ಸಂಬಂಧಿಸಿರುತ್ತವೆ.
ಆಫ್ಸೆಟ್ ಪ್ರಾಪರ್ಟಿಗಳು
inset-block-start
:horizontal-tb
ನಲ್ಲಿtop
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.inset-block-end
:horizontal-tb
ನಲ್ಲಿbottom
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.inset-inline-start
:ltr
ನಲ್ಲಿleft
ಗೆ ಮತ್ತುrtl
ನಲ್ಲಿright
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.inset-inline-end
:ltr
ನಲ್ಲಿright
ಗೆ ಮತ್ತುrtl
ನಲ್ಲಿleft
ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.
ಅಗಲ ಮತ್ತು ಎತ್ತರ
block-size
:horizontal-tb
ನಲ್ಲಿ ಲಂಬ ಆಯಾಮವನ್ನು ಮತ್ತು ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಲ್ಲಿ ಅಡ್ಡ ಆಯಾಮವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.inline-size
:horizontal-tb
ನಲ್ಲಿ ಅಡ್ಡ ಆಯಾಮವನ್ನು ಮತ್ತು ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಲ್ಲಿ ಲಂಬ ಆಯಾಮವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.min-block-size
,max-block-size
:block-size
ಗಾಗಿ ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಮೌಲ್ಯಗಳು.min-inline-size
,max-inline-size
:inline-size
ಗಾಗಿ ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಮೌಲ್ಯಗಳು.
ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು: ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅಳವಡಿಸುವುದು
ರೈಟಿಂಗ್ ಮೋಡ್-ಅವೇರ್ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.
ಉದಾಹರಣೆ 1: ಒಂದು ಸರಳ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್
ಎಡಭಾಗದಲ್ಲಿ ಲೋಗೋ ಮತ್ತು ಬಲಭಾಗದಲ್ಲಿ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ಗಳಿರುವ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಭೌತಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ, ನೀವು ಜಾಗವನ್ನು ರಚಿಸಲು ಲೋಗೋದ ಮೇಲೆ margin-left
ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ಗಳ ಮೇಲೆ margin-right
ಅನ್ನು ಬಳಸಬಹುದು. ಆದಾಗ್ಯೂ, ಇದು RTL ಭಾಷೆಗಳಲ್ಲಿ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ ಅದೇ ಲೇಔಟ್ ಅನ್ನು ಹೇಗೆ ಸಾಧಿಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:
```html ``` ```css nav { display: flex; justify-content: space-between; padding-inline-start: 1rem; /* Use logical property */ padding-inline-end: 1rem; /* Use logical property */ } .logo { margin-inline-end: auto; /* Push logo to start, links to end */ } ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; } ```ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ನ್ಯಾವಿಗೇಷನ್ನ ಪ್ಯಾಡಿಂಗ್ಗಾಗಿ ಮತ್ತು ಲೋಗೋದ ಆಟೋ ಮಾರ್ಜಿನ್ಗಾಗಿ margin-left
ಮತ್ತು margin-right
ಅನ್ನು margin-inline-start
ಮತ್ತು margin-inline-end
ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿದ್ದೇವೆ. ಲೋಗೋದ margin-inline-end
ನಲ್ಲಿರುವ `auto` ಮೌಲ್ಯವು LTR ನಲ್ಲಿ ಎಡಭಾಗದಲ್ಲಿ ಮತ್ತು RTL ನಲ್ಲಿ ಬಲಭಾಗದಲ್ಲಿ ಜಾಗವನ್ನು ತುಂಬಲು ಕಾರಣವಾಗುತ್ತದೆ, ಇದು ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಅಂತ್ಯಕ್ಕೆ ತಳ್ಳುತ್ತದೆ.
ಇದು ಲೋಗೋ ಯಾವಾಗಲೂ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ನ ಆರಂಭದ ಬದಿಯಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ಗಳು ಪಠ್ಯದ ದಿಕ್ಕನ್ನು ಲೆಕ್ಕಿಸದೆ ಕೊನೆಯ ಬದಿಯಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 2: ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವುದು
ನಿಮ್ಮ ಬಳಿ ಶೀರ್ಷಿಕೆ, ವಿವರಣೆ ಮತ್ತು ಚಿತ್ರವಿರುವ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಇದೆ ಎಂದುಕೊಳ್ಳಿ. ನೀವು ಕಂಟೆಂಟ್ ಸುತ್ತಲೂ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿಸಲು ಮತ್ತು ಸೂಕ್ತ ಬದಿಗಳಲ್ಲಿ ಬಾರ್ಡರ್ ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ.
```html
Card Title
This is a brief description of the card content.
ಇಲ್ಲಿ, ನಾವು ಕಾರ್ಡ್ ಕಂಟೆಂಟ್ ಸುತ್ತಲೂ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿಸಲು padding-block-start
, padding-block-end
, padding-inline-start
, ಮತ್ತು padding-inline-end
ಅನ್ನು ಬಳಸಿದ್ದೇವೆ. ಇದು LTR ಮತ್ತು RTL ಲೇಔಟ್ಗಳಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಸರಿಯಾಗಿ ಅನ್ವಯವಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 3: ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
ಸಾಂಪ್ರದಾಯಿಕ ಜಪಾನೀಸ್ ಅಥವಾ ಚೈನೀಸ್ ಕ್ಯಾಲಿಗ್ರಫಿಯಲ್ಲಿರುವಂತೆ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಈ ನಿರ್ದಿಷ್ಟ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಿಗೆ ಲೇಔಟ್ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ.
```htmlThis text is displayed vertically.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು writing-mode
ಅನ್ನು vertical-rl
ಗೆ ಹೊಂದಿಸಿದ್ದೇವೆ, ಇದು ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಬಲದಿಂದ ಎಡಕ್ಕೆ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ನಾವು ಒಟ್ಟಾರೆ ಎತ್ತರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು `block-size` ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ನಾವು ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ ಬಾರ್ಡರ್ಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತೇವೆ, ಇವುಗಳನ್ನು ಲಂಬ ಸಂದರ್ಭದಲ್ಲಿ ಮರುಮ್ಯಾಪ್ ಮಾಡಲಾಗುತ್ತದೆ. vertical-rl
ನಲ್ಲಿ, border-inline-start
ಮೇಲಿನ ಬಾರ್ಡರ್ ಆಗುತ್ತದೆ, border-inline-end
ಕೆಳಗಿನ ಬಾರ್ಡರ್ ಆಗುತ್ತದೆ, padding-block-start
ಎಡ ಪ್ಯಾಡಿಂಗ್ ಆಗುತ್ತದೆ ಮತ್ತು padding-block-end
ಬಲ ಪ್ಯಾಡಿಂಗ್ ಆಗುತ್ತದೆ.
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಮತ್ತು ಗ್ರಿಡ್ ಲೇಔಟ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು
ಸಿಎಸ್ಎಸ್ ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಮತ್ತು ಗ್ರಿಡ್ನಂತಹ ಆಧುನಿಕ ಲೇಔಟ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಸರಾಗವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ. ಈ ಲೇಔಟ್ ವಿಧಾನಗಳನ್ನು ಬಳಸುವಾಗ, ನಿಮ್ಮ ಲೇಔಟ್ಗಳು ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕುಗಳಿಗೆ ಸರಿಯಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ಜೋಡಣೆ, ಗಾತ್ರ ಮತ್ತು ಅಂತರಕ್ಕಾಗಿ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಬೇಕು.
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ನಲ್ಲಿ, justify-content
, align-items
, ಮತ್ತು gap
ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಮಾರ್ಜಿನ್ಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ಗಾಗಿ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ, ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ರೈಟಿಂಗ್ ಮೋಡ್-ಅವೇರ್ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ಬಳಸಬೇಕು. ವಿಶೇಷವಾಗಿ `flex-direction: row | row-reverse;` ಬಳಸುವಾಗ, `start` ಮತ್ತು `end` ಪ್ರಾಪರ್ಟಿಗಳು ಸಂದರ್ಭಕ್ಕೆ ತಕ್ಕಂತೆ ವರ್ತಿಸುತ್ತವೆ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ `left` ಮತ್ತು `right` ಗಿಂತ ಹೆಚ್ಚು ಸೂಕ್ತವಾಗಿವೆ.
ಉದಾಹರಣೆಗೆ, ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಕಂಟೇನರ್ನಲ್ಲಿರುವ ವಸ್ತುಗಳ ಸಾಲನ್ನು ಪರಿಗಣಿಸಿ. ವಸ್ತುಗಳನ್ನು ಸಮಾನವಾಗಿ ವಿತರಿಸಲು, ನೀವು justify-content: space-between
ಅನ್ನು ಬಳಸಬಹುದು. RTL ಲೇಔಟ್ನಲ್ಲಿ, ವಸ್ತುಗಳು ಇನ್ನೂ ಸಮಾನವಾಗಿ ವಿತರಿಸಲ್ಪಡುತ್ತವೆ, ಆದರೆ ವಸ್ತುಗಳ ಕ್ರಮವು ಹಿಮ್ಮುಖವಾಗುತ್ತದೆ.
ಗ್ರಿಡ್ ಲೇಔಟ್
ಗ್ರಿಡ್ ಲೇಔಟ್ ಸಂಕೀರ್ಣ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ಇನ್ನೂ ಹೆಚ್ಚು ಶಕ್ತಿಯುತ ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹೆಸರಿಸಲಾದ ಗ್ರಿಡ್ ಲೈನ್ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿವೆ. ಗ್ರಿಡ್ ಲೈನ್ಗಳನ್ನು ಸಂಖ್ಯೆಯಿಂದ ಉಲ್ಲೇಖಿಸುವ ಬದಲು, ನೀವು ಅವುಗಳನ್ನು "start" ಮತ್ತು "end" ನಂತಹ ತಾರ್ಕಿಕ ಪದಗಳನ್ನು ಬಳಸಿ ಹೆಸರಿಸಬಹುದು ಮತ್ತು ನಂತರ ರೈಟಿಂಗ್ ಮೋಡ್ಗೆ ಅನುಗುಣವಾಗಿ ಅವುಗಳ ಭೌತಿಕ ಸ್ಥಾನವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
ಉದಾಹರಣೆಗೆ, ನೀವು "inline-start", "inline-end", "block-start", ಮತ್ತು "block-end" ನಂತಹ ಹೆಸರಿಸಲಾದ ಲೈನ್ಗಳೊಂದಿಗೆ ಗ್ರಿಡ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು ಮತ್ತು ನಂತರ ಗ್ರಿಡ್ನೊಳಗೆ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಸ್ಥಾನೀಕರಿಸಲು ಈ ಹೆಸರುಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕುಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು
ಸಿಎಸ್ಎಸ್ ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದರಿಂದ ಹಲವಾರು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳಿವೆ:
- ಸುಧಾರಿತ ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (i18n): ವೈವಿಧ್ಯಮಯ ಭಾಷೆಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ಗಳಿಗಾಗಿ ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸುತ್ತದೆ.
- ವರ್ಧಿತ ಪ್ರವೇಶಸಾಧ್ಯತೆ (Accessibility): ಬಳಕೆದಾರರ ಭಾಷೆ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕ ಹಿನ್ನೆಲೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರ ಮತ್ತು ಸಹಜವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ಕಡಿಮೆ ಕೋಡ್ ಸಂಕೀರ್ಣತೆ: ವಿಭಿನ್ನ ಪಠ್ಯದ ದಿಕ್ಕುಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸಂಕೀರ್ಣ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಅಥವಾ ಷರತ್ತುಬದ್ಧ ತರ್ಕದ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುವ ಮೂಲಕ ಸಿಎಸ್ಎಸ್ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.
- ಹೆಚ್ಚಿನ ನಿರ್ವಹಣಾ ಸಾಮರ್ಥ್ಯ (Maintainability): ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಲೇಔಟ್ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ.
- ಭವಿಷ್ಯ-ನಿರೋಧಕ (Future-Proofing): ನೀವು ಪ್ರಸ್ತುತ ಬೆಂಬಲಿಸದಿರುವ ಭವಿಷ್ಯದ ಭಾಷೆಗಳು ಮತ್ತು ಬರವಣಿಗೆ ವ್ಯವಸ್ಥೆಗಳಿಗಾಗಿ ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ ಅನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ.
ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಅದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಅತ್ಯಗತ್ಯ:
- ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ: ನಿಮ್ಮ ಗುರಿ ಬ್ರೌಸರ್ಗಳು ನೀವು ಬಳಸುತ್ತಿರುವ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ಉತ್ತಮ ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತವೆ, ಆದರೆ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಿಗೆ ಪಾಲಿಫಿಲ್ಗಳು ಅಥವಾ ಫಾಲ್ಬ್ಯಾಕ್ ಪರಿಹಾರಗಳು ಬೇಕಾಗಬಹುದು.
- ಪರೀಕ್ಷೆ: ನಿಮ್ಮ ಲೇಔಟ್ಗಳು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶನಗೊಳ್ಳುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕುಗಳಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ. ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಕನ್ಸೋಲ್ಗಳಂತಹ ಸಾಧನಗಳು ವಿಭಿನ್ನ ಭಾಷಾ ಪರಿಸರಗಳನ್ನು ಅನುಕರಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ.
- ಸ್ಥಿರತೆ: ನಿಮ್ಮ ಕೋಡ್ಬೇಸ್ನಾದ್ಯಂತ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳ ಬಳಕೆಯಲ್ಲಿ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಿ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
- ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆ (Progressive Enhancement): ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಯಾಗಿ ಬಳಸಿ, ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಿಗೆ ಫಾಲ್ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಿ.
- ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕೋಡ್ಬೇಸ್ಗಳನ್ನು ಪರಿಗಣಿಸಿ: ದೊಡ್ಡ, ಸ್ಥಾಪಿತ ಕೋಡ್ಬೇಸ್ ಅನ್ನು ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಲು ಪರಿವರ್ತಿಸುವುದು ಒಂದು ಮಹತ್ವದ ಕಾರ್ಯವಾಗಿರಬಹುದು. ಪರಿವರ್ತನೆಯನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಯೋಜಿಸಿ ಮತ್ತು ಪರಿವರ್ತನೆಗೆ ಸಹಾಯ ಮಾಡಲು ಸ್ವಯಂಚಾಲಿತ ಸಾಧನಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
ಪರಿಕರಗಳು ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳು
ಸಿಎಸ್ಎಸ್ ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು ಕೆಲವು ಸಹಾಯಕವಾದ ಪರಿಕರಗಳು ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳು ಇಲ್ಲಿವೆ:
- MDN Web Docs: ಮೊಜಿಲ್ಲಾ ಡೆವಲಪರ್ ನೆಟ್ವರ್ಕ್ (MDN) ಸಿಎಸ್ಎಸ್ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳ ಬಗ್ಗೆ ಸಮಗ್ರ ದಸ್ತಾವೇಜನ್ನು ಒದಗಿಸುತ್ತದೆ: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
- CSS Writing Modes: ಸಿಎಸ್ಎಸ್ ರೈಟಿಂಗ್ ಮೋಡ್ಸ್ ನಿರ್ದಿಷ್ಟತೆಯು
writing-mode
ಮತ್ತುdirection
ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ: https://www.w3.org/TR/css-writing-modes-3/ - RTLCSS: RTL ಭಾಷೆಗಳಿಗಾಗಿ ಸಿಎಸ್ಎಸ್ ಸ್ಟೈಲ್ಶೀಟ್ಗಳನ್ನು ಪರಿವರ್ತಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸುವ ಸಾಧನ: https://rtlcss.com/
- Browser Developer Tools: ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕುಗಳಲ್ಲಿ ಲೇಔಟ್ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ನಿಮ್ಮ ಬ್ರೌಸರ್ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
ತೀರ್ಮಾನ
ಸಿಎಸ್ಎಸ್ ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಒಳಗೊಳ್ಳುವ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಮತ್ತು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್ಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕುಗಳಿಗೆ ಸರಾಗವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಬಹುದು, ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗಳು ಅವರ ಭಾಷೆ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕ ಹಿನ್ನೆಲೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ ಎಲ್ಲರಿಗೂ ಬಳಕೆದಾರ-ಸ್ನೇಹಿಯಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಲಾಜಿಕಲ್ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಎಲ್ಲರಿಗೂ ಪ್ರವೇಶಿಸಬಹುದಾದ ನಿಜವಾದ ಜಾಗತಿಕ ವೆಬ್ ಅನ್ನು ರಚಿಸುವ ನಿಟ್ಟಿನಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯಾಗಿದೆ.