ಜಾಗತಿಕ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು: CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಕುರಿತು ಒಂದು ಆಳವಾದ ನೋಟ

ಇಂದಿನ ಅಂತರ್ಸಂಪರ್ಕಿತ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್‌ಸೈಟ್‌ಗಳು ವೈವಿಧ್ಯಮಯ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಪೂರೈಸಬೇಕಾಗುತ್ತದೆ. ಇದರರ್ಥ ಎಡದಿಂದ-ಬಲಕ್ಕೆ (LTR) ಹಿಡಿದು ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಮತ್ತು ಲಂಬ ಬರವಣಿಗೆಯವರೆಗೆ ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಬರವಣಿಗೆಯ ಶೈಲಿಗಳನ್ನು ಬೆಂಬಲಿಸುವುದು. left, right, top, ಮತ್ತು bottom ನಂತಹ ಸಾಂಪ್ರದಾಯಿಕ CSS ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ದಿಕ್ಕನ್ನು ಅವಲಂಬಿಸಿವೆ, ಇದು ವಿಭಿನ್ನ ಬರವಣಿಗೆಯ ಶೈಲಿಗಳಿಗೆ ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸವಾಲಾಗಿದೆ. ಇಲ್ಲಿಯೇ CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ನೆರವಿಗೆ ಬರುತ್ತವೆ.

CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಎಂದರೇನು?

CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಭೌತಿಕ ದಿಕ್ಕುಗಳಿಗಿಂತ ಹೆಚ್ಚಾಗಿ ವಿಷಯದ ಹರಿವಿನ ಆಧಾರದ ಮೇಲೆ ಲೇಔಟ್ ದಿಕ್ಕುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ CSS ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳ ಒಂದು ಗುಂಪಾಗಿದೆ. ಅವು ಪರದೆಯ ಭೌತಿಕ ದೃಷ್ಟಿಕೋನವನ್ನು ಅಮೂರ್ತಗೊಳಿಸುತ್ತವೆ, ಬರವಣಿಗೆಯ ಶೈಲಿ ಅಥವಾ ದಿಕ್ಕನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರವಾಗಿ ಅನ್ವಯವಾಗುವ ಲೇಔಟ್ ನಿಯಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

left ಮತ್ತು right ಎಂದು ಯೋಚಿಸುವ ಬದಲು, ನೀವು start ಮತ್ತು end ಎಂದು ಯೋಚಿಸುತ್ತೀರಿ. top ಮತ್ತು bottom ಬದಲು, ನೀವು block-start ಮತ್ತು block-end ಎಂದು ಯೋಚಿಸುತ್ತೀರಿ. ನಂತರ ಬ್ರೌಸರ್ ಈ ತಾರ್ಕಿಕ ದಿಕ್ಕುಗಳನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಬರವಣಿಗೆಯ ಶೈಲಿಗೆ ಅನುಗುಣವಾಗಿ ಸೂಕ್ತವಾದ ಭೌತಿಕ ದಿಕ್ಕುಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮ್ಯಾಪ್ ಮಾಡುತ್ತದೆ.

ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು: ಬರವಣಿಗೆಯ ಶೈಲಿಗಳು ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕು

ನಿರ್ದಿಷ್ಟ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳ ಬಗ್ಗೆ ತಿಳಿಯುವ ಮೊದಲು, ಎರಡು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ:

ಬರವಣಿಗೆಯ ಶೈಲಿಗಳು

ಬರವಣಿಗೆಯ ಶೈಲಿಗಳು ಪಠ್ಯದ ಸಾಲುಗಳನ್ನು ಯಾವ ದಿಕ್ಕಿನಲ್ಲಿ ಜೋಡಿಸಬೇಕು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ. ಎರಡು ಸಾಮಾನ್ಯ ಬರವಣಿಗೆಯ ಶೈಲಿಗಳೆಂದರೆ:

horizontal-tb: ಸಮತಲವಾಗಿ ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ (ಇಂಗ್ಲಿಷ್, ಸ್ಪ್ಯಾನಿಷ್, ಫ್ರೆಂಚ್, ಇತ್ಯಾದಿ ಭಾಷೆಗಳಿಗೆ ಪ್ರಮಾಣಿತ)
vertical-rl: ಲಂಬವಾಗಿ ಬಲದಿಂದ ಎಡಕ್ಕೆ (ಜಪಾನೀಸ್ ಮತ್ತು ಚೈನೀಸ್‌ನಂತಹ ಕೆಲವು ಪೂರ್ವ ಏಷ್ಯಾದ ಭಾಷೆಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ)

vertical-lr (ಲಂಬವಾಗಿ ಎಡದಿಂದ-ಬಲಕ್ಕೆ) ನಂತಹ ಇತರ ಬರವಣಿಗೆಯ ಶೈಲಿಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ, ಆದರೆ ಅವು ಕಡಿಮೆ ಸಾಮಾನ್ಯವಾಗಿದೆ.

ಪಠ್ಯದ ದಿಕ್ಕು

ಪಠ್ಯದ ದಿಕ್ಕು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಅಕ್ಷರಗಳನ್ನು ಯಾವ ದಿಕ್ಕಿನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಪಠ್ಯ ದಿಕ್ಕುಗಳೆಂದರೆ:

ltr: ಎಡದಿಂದ-ಬಲಕ್ಕೆ (ಹೆಚ್ಚಿನ ಭಾಷೆಗಳಿಗೆ ಪ್ರಮಾಣಿತ)
rtl: ಬಲದಿಂದ-ಎಡಕ್ಕೆ (ಅರೇಬಿಕ್, ಹೀಬ್ರೂ, ಪರ್ಷಿಯನ್, ಇತ್ಯಾದಿ ಭಾಷೆಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ)

ಈ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಕ್ರಮವಾಗಿ writing-mode ಮತ್ತು direction CSS ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಿ ಹೊಂದಿಸಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ:


 .rtl-example {
 direction: rtl;
 }

 .vertical-example {
 writing-mode: vertical-rl;
 }

ಮೂಲ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು

ಅತ್ಯಂತ ಪ್ರಮುಖವಾದ CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಮತ್ತು ಅವುಗಳು ತಮ್ಮ ಭೌತಿಕ ಸಮಾನ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಹೇಗೆ ಸಂಬಂಧಿಸಿವೆ ಎಂಬುದರ ವಿವರಣೆ ಇಲ್ಲಿದೆ:

ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು

ಈ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಪ್ಯಾಡಿಂಗ್, ಮಾರ್ಜಿನ್, ಮತ್ತು ಬಾರ್ಡರ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುತ್ತವೆ.

margin-inline-start: LTR ನಲ್ಲಿ margin-left ಮತ್ತು RTL ನಲ್ಲಿ margin-right ಗೆ ಸಮಾನ.
margin-inline-end: LTR ನಲ್ಲಿ margin-right ಮತ್ತು RTL ನಲ್ಲಿ margin-left ಗೆ ಸಮಾನ.
margin-block-start: LTR ಮತ್ತು RTL ಎರಡರಲ್ಲೂ margin-top ಗೆ ಸಮಾನ.
margin-block-end: LTR ಮತ್ತು RTL ಎರಡರಲ್ಲೂ margin-bottom ಗೆ ಸಮಾನ.
padding-inline-start: LTR ನಲ್ಲಿ padding-left ಮತ್ತು RTL ನಲ್ಲಿ padding-right ಗೆ ಸಮಾನ.
padding-inline-end: LTR ನಲ್ಲಿ padding-right ಮತ್ತು RTL ನಲ್ಲಿ padding-left ಗೆ ಸಮಾನ.
padding-block-start: LTR ಮತ್ತು RTL ಎರಡರಲ್ಲೂ padding-top ಗೆ ಸಮಾನ.
padding-block-end: LTR ಮತ್ತು RTL ಎರಡರಲ್ಲೂ padding-bottom ಗೆ ಸಮಾನ.
border-inline-start: ಲಾಜಿಕಲ್ ಸ್ಟಾರ್ಟ್ ಸೈಡ್‌ನಲ್ಲಿ ಬಾರ್ಡರ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್.
border-inline-end: ಲಾಜಿಕಲ್ ಎಂಡ್ ಸೈಡ್‌ನಲ್ಲಿ ಬಾರ್ಡರ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್.
border-block-start: ಲಾಜಿಕಲ್ ಟಾಪ್ ಸೈಡ್‌ನಲ್ಲಿ ಬಾರ್ಡರ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್.
border-block-end: ಲಾಜಿಕಲ್ ಬಾಟಮ್ ಸೈಡ್‌ನಲ್ಲಿ ಬಾರ್ಡರ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್.

ಉದಾಹರಣೆ: ಪಠ್ಯದ ದಿಕ್ಕನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರವಾದ ಪ್ಯಾಡಿಂಗ್‌ನೊಂದಿಗೆ ಬಟನ್ ರಚಿಸುವುದು:


 .button {
 padding-inline-start: 1em;
 padding-inline-end: 1em;
 }

ಪೊಸಿಶನಿಂಗ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು

ಈ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಪೋಷಕ (parent) ಎಲಿಮೆಂಟ್‌ನೊಳಗೆ ಅದರ ಸ್ಥಾನವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತವೆ.

inset-inline-start: LTR ನಲ್ಲಿ left ಮತ್ತು RTL ನಲ್ಲಿ right ಗೆ ಸಮಾನ.
inset-inline-end: LTR ನಲ್ಲಿ right ಮತ್ತು RTL ನಲ್ಲಿ left ಗೆ ಸಮಾನ.
inset-block-start: LTR ಮತ್ತು RTL ಎರಡರಲ್ಲೂ top ಗೆ ಸಮಾನ.
inset-block-end: LTR ಮತ್ತು RTL ಎರಡರಲ್ಲೂ bottom ಗೆ ಸಮಾನ.

ಉದಾಹರಣೆ: ಅದರ ಕಂಟೇನರ್‌ನ ಸ್ಟಾರ್ಟ್ ಮತ್ತು ಟಾಪ್ ಎಡ್ಜ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಪೊಸಿಶನ್ ಮಾಡುವುದು:


 .element {
 position: absolute;
 inset-inline-start: 10px;
 inset-block-start: 20px;
 }

ಫ್ಲೋ ಲೇಔಟ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು

ಈ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಒಂದು ಕಂಟೇನರ್‌ನೊಳಗೆ ವಿಷಯದ ಲೇಔಟ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುತ್ತವೆ.

float-inline-start: LTR ನಲ್ಲಿ float: left ಮತ್ತು RTL ನಲ್ಲಿ float: right ಗೆ ಸಮಾನ.
float-inline-end: LTR ನಲ್ಲಿ float: right ಮತ್ತು RTL ನಲ್ಲಿ float: left ಗೆ ಸಮಾನ.
clear-inline-start: LTR ನಲ್ಲಿ clear: left ಮತ್ತು RTL ನಲ್ಲಿ clear: right ಗೆ ಸಮಾನ.
clear-inline-end: LTR ನಲ್ಲಿ clear: right ಮತ್ತು RTL ನಲ್ಲಿ clear: left ಗೆ ಸಮಾನ.

ಉದಾಹರಣೆ: ವಿಷಯದ ಹರಿವಿನ ಆರಂಭಕ್ಕೆ ಒಂದು ಚಿತ್ರವನ್ನು ಫ್ಲೋಟ್ ಮಾಡುವುದು:


 .image {
 float-inline-start: left; /* LTR ಮತ್ತು RTL ಎರಡರಲ್ಲೂ ಸ್ಥಿರವಾದ ದೃಶ್ಯ ಸ್ಥಾನ */
 }

ಗಾತ್ರದ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು

inline-size: ಸಮತಲ ಬರವಣಿಗೆಯ ಶೈಲಿಯಲ್ಲಿ ಸಮತಲ ಗಾತ್ರವನ್ನು ಮತ್ತು ಲಂಬ ಬರವಣಿಗೆಯ ಶೈಲಿಯಲ್ಲಿ ಲಂಬ ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
block-size: ಸಮತಲ ಬರವಣಿಗೆಯ ಶೈಲಿಯಲ್ಲಿ ಲಂಬ ಗಾತ್ರವನ್ನು ಮತ್ತು ಲಂಬ ಬರವಣಿಗೆಯ ಶೈಲಿಯಲ್ಲಿ ಸಮತಲ ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
min-inline-size
max-inline-size
min-block-size
max-block-size

ಲಂಬ ಬರವಣಿಗೆಯ ಶೈಲಿಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಇವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿವೆ.

ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು

CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಅಂತರರಾಷ್ಟ್ರೀಯ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕೆ ಹಲವಾರು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:

ಸುಧಾರಿತ ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (I18N): ವಿಭಿನ್ನ ಬರವಣಿಗೆಯ ಶೈಲಿಗಳು ಮತ್ತು ಪಠ್ಯ ದಿಕ್ಕುಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಿ, ಬಹು ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.
ವರ್ಧಿತ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆ: ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸದ ತತ್ವಗಳನ್ನು ಪೂರಕವಾಗಿಸುತ್ತವೆ, ವಿವಿಧ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ದೃಷ್ಟಿಕೋನಗಳಿಗೆ ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಕೋಡ್ ನಿರ್ವಹಣೆ: ಭಾಷೆ ಅಥವಾ ದಿಕ್ಕನ್ನು ಆಧರಿಸಿ ಸಂಕೀರ್ಣ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಮತ್ತು ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್‌ನ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡಿ, ಇದರಿಂದಾಗಿ ಸ್ವಚ್ಛ ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ CSS ಉಂಟಾಗುತ್ತದೆ.
ಕಡಿಮೆ ಸಂಕೀರ್ಣತೆ: ಪರದೆಯ ಭೌತಿಕ ದೃಷ್ಟಿಕೋನವನ್ನು ಅಮೂರ್ತಗೊಳಿಸಿ, ಲೇಔಟ್ ನಿಯಮಗಳ ಬಗ್ಗೆ ತರ್ಕಿಸಲು ಮತ್ತು ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ಸ್ಥಿರ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ.
ಭವಿಷ್ಯ-ನಿರೋಧಕ: ಬರವಣಿಗೆಯ ಶೈಲಿಗಳು ಮತ್ತು ಲೇಔಟ್ ತಂತ್ರಜ್ಞಾನಗಳು ವಿಕಸನಗೊಂಡಂತೆ, ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕೆ ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದಾದ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತವೆ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

ಅಂತರರಾಷ್ಟ್ರೀಕೃತ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ:

ಉದಾಹರಣೆ 1: ನ್ಯಾವಿಗೇಷನ್ ಮೆನು ರಚಿಸುವುದು

ಒಂದು ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ಪರಿಗಣಿಸಿ, ಅಲ್ಲಿ ನೀವು LTR ಭಾಷೆಗಳಲ್ಲಿ ಮೆನು ಐಟಂಗಳನ್ನು ಬಲಕ್ಕೆ ಮತ್ತು RTL ಭಾಷೆಗಳಲ್ಲಿ ಎಡಕ್ಕೆ ಜೋಡಿಸಲು ಬಯಸುತ್ತೀರಿ.


 .nav {
 display: flex;
 justify-content: flex-end; /* ಐಟಂಗಳನ್ನು ಸಾಲಿನ ಕೊನೆಗೆ ಜೋಡಿಸಿ */
 }

ಈ ಸಂದರ್ಭದಲ್ಲಿ, flex-end ಬಳಸುವುದರಿಂದ ಮೆನು ಐಟಂಗಳು LTR ನಲ್ಲಿ ಬಲಕ್ಕೆ ಮತ್ತು RTL ನಲ್ಲಿ ಎಡಕ್ಕೆ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ, ಪ್ರತಿ ದಿಕ್ಕಿಗೂ ಪ್ರತ್ಯೇಕ ಸ್ಟೈಲ್‌ಗಳ ಅಗತ್ಯವಿಲ್ಲದೆ.

ಉದಾಹರಣೆ 2: ಚಾಟ್ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು

ಒಂದು ಚಾಟ್ ಇಂಟರ್ಫೇಸ್‌ನಲ್ಲಿ, ನೀವು ಕಳುಹಿಸುವವರ ಸಂದೇಶಗಳನ್ನು ಬಲಭಾಗದಲ್ಲಿ ಮತ್ತು ಸ್ವೀಕರಿಸುವವರ ಸಂದೇಶಗಳನ್ನು ಎಡಭಾಗದಲ್ಲಿ (LTR ನಲ್ಲಿ) ಪ್ರದರ್ಶಿಸಲು ಬಯಸಬಹುದು. RTL ನಲ್ಲಿ, ಇದು ಹಿಮ್ಮುಖವಾಗಿರಬೇಕು.


 .message.sender {
 margin-inline-start: auto; /* ಕಳುಹಿಸುವವರ ಸಂದೇಶಗಳನ್ನು ಕೊನೆಗೆ ತಳ್ಳಿ */
 }

 .message.receiver {
 margin-inline-end: auto; /* ಸ್ವೀಕರಿಸುವವರ ಸಂದೇಶಗಳನ್ನು ಆರಂಭಕ್ಕೆ ತಳ್ಳಿ (LTR ನಲ್ಲಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಎಡಕ್ಕೆ) */
 }

ಉದಾಹರಣೆ 3: ಸರಳ ಕಾರ್ಡ್ ಲೇಔಟ್ ರಚಿಸುವುದು

LTR ನಲ್ಲಿ ಎಡಭಾಗದಲ್ಲಿ ಚಿತ್ರ ಮತ್ತು ಬಲಭಾಗದಲ್ಲಿ ಪಠ್ಯ ವಿಷಯದೊಂದಿಗೆ ಕಾರ್ಡ್ ರಚಿಸಿ, ಮತ್ತು RTL ನಲ್ಲಿ ಇದರ ವಿರುದ್ಧ.


 .card {
 display: flex;
 }

 .card img {
 margin-inline-end: 1em;
 }

ಚಿತ್ರದ ಮೇಲಿನ margin-inline-end ಸ್ವಯಂಚಾಲಿತವಾಗಿ LTR ನಲ್ಲಿ ಬಲಕ್ಕೆ ಮತ್ತು RTL ನಲ್ಲಿ ಎಡಕ್ಕೆ ಮಾರ್ಜಿನ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 4: ಸ್ಥಿರ ಜೋಡಣೆಯೊಂದಿಗೆ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ನಿಭಾಯಿಸುವುದು

LTR ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳ ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಲೇಬಲ್‌ಗಳೊಂದಿಗೆ ಒಂದು ಫಾರ್ಮ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. RTL ನಲ್ಲಿ, ಲೇಬಲ್‌ಗಳು ಎಡಭಾಗದಲ್ಲಿರಬೇಕು.


 .form-group {
 display: flex;
 align-items: center;
 }

 .form-group label {
 text-align: end;
 padding-inline-end: 0.5em;
 width: 100px; /* ಲೇಬಲ್‌ಗಾಗಿ ನಿಗದಿತ ಅಗಲ */
 }

 .form-group input {
 flex: 1;
 }

`text-align: end` ಬಳಸುವುದರಿಂದ ಪಠ್ಯವನ್ನು LTR ನಲ್ಲಿ ಬಲಕ್ಕೆ ಮತ್ತು RTL ನಲ್ಲಿ ಎಡಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ. padding-inline-end ಲೇಔಟ್ ದಿಕ್ಕನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರವಾದ ಅಂತರವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಂದ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಸ್ಥಳಾಂತರಿಸುವುದು

ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಲು ಸ್ಥಳಾಂತರಿಸುವುದು ಕಷ್ಟಕರವೆನಿಸಬಹುದು, ಆದರೆ ಇದು ಹಂತಹಂತವಾದ ಪ್ರಕ್ರಿಯೆ. ಇಲ್ಲಿದೆ ಒಂದು ಸೂಚಿತ ವಿಧಾನ:

ದಿಕ್ಕನ್ನು ಅವಲಂಬಿಸಿರುವ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಗುರುತಿಸಿ: left, right, margin-left, margin-right, ಇತ್ಯಾದಿ ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸುವ CSS ನಿಯಮಗಳನ್ನು ಗುರುತಿಸುವುದರೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ.
ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿ ಸಮಾನತೆಗಳನ್ನು ರಚಿಸಿ: ಪ್ರತಿ ದಿಕ್ಕನ್ನು ಅವಲಂಬಿಸಿರುವ ನಿಯಮಕ್ಕೆ, ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಿ ಅನುಗುಣವಾದ ನಿಯಮವನ್ನು ರಚಿಸಿ (ಉದಾಹರಣೆಗೆ, margin-left ಅನ್ನು margin-inline-start ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ).
ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಹೊಸ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು LTR ಮತ್ತು RTL ಲೇಔಟ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ. RTL ಪರಿಸರವನ್ನು ಅನುಕರಿಸಲು ನೀವು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಬಹುದು.
ಹಂತಹಂತವಾಗಿ ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಿ: ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ ಎಂದು ನಿಮಗೆ ವಿಶ್ವಾಸ ಬಂದ ನಂತರ, ಮೂಲ ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಹಂತಹಂತವಾಗಿ ತೆಗೆದುಹಾಕಿ.
CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಿ: ಸಾಮಾನ್ಯ ಅಂತರ ಅಥವಾ ಗಾತ್ರದ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ, ಇದು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ: :root { --spacing-inline: 1em; } .element { margin-inline-start: var(--spacing-inline); margin-inline-end: var(--spacing-inline); }

ಬ್ರೌಸರ್ ಬೆಂಬಲ

CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು Chrome, Firefox, Safari, ಮತ್ತು Edge ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಅವುಗಳನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸದೇ ಇರಬಹುದು. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನೀವು css-logical-props ನಂತಹ ಪಾಲಿಫಿಲ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಬಹುದು.

ಸುಧಾರಿತ ತಂತ್ರಗಳು

CSS ಗ್ರಿಡ್ ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು CSS ಗ್ರಿಡ್ ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ವಿಭಿನ್ನ ಬರವಣಿಗೆಯ ಶೈಲಿಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಸಂಕೀರ್ಣ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಕಂಟೇನರ್‌ನ ಲಾಜಿಕಲ್ ಸ್ಟಾರ್ಟ್ ಮತ್ತು ಎಂಡ್‌ಗೆ ಜೋಡಿಸಲು ನೀವು justify-content: start ಮತ್ತು justify-content: end ಅನ್ನು ಬಳಸಬಹುದು.

ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳೊಂದಿಗೆ (CSS ವೇರಿಯಬಲ್‌ಗಳು) ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಮೇಲೆ ತೋರಿಸಿದಂತೆ, CSS ವೇರಿಯಬಲ್‌ಗಳು ನಿಮ್ಮ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿ ಕೋಡ್ ಅನ್ನು ಇನ್ನಷ್ಟು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಓದಬಲ್ಲಂತೆ ಮಾಡಬಹುದು. ಸಾಮಾನ್ಯ ಅಂತರ ಮತ್ತು ಗಾತ್ರದ ಮೌಲ್ಯಗಳನ್ನು ವೇರಿಯಬಲ್‌ಗಳಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಾದ್ಯಂತ ಮರುಬಳಕೆ ಮಾಡಿ.

JavaScript ನೊಂದಿಗೆ ಬರವಣಿಗೆಯ ಶೈಲಿ ಮತ್ತು ದಿಕ್ಕನ್ನು ಪತ್ತೆಹಚ್ಚುವುದು

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೀವು JavaScript ಬಳಸಿ ಪ್ರಸ್ತುತ ಬರವಣಿಗೆಯ ಶೈಲಿ ಅಥವಾ ದಿಕ್ಕನ್ನು ಪತ್ತೆಹಚ್ಚಬೇಕಾಗಬಹುದು. ನೀವು writing-mode ಮತ್ತು direction ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು ಹಿಂಪಡೆಯಲು getComputedStyle() ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ: ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ವಿಭಿನ್ನ ಬರವಣಿಗೆಯ ಶೈಲಿಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡಲು ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳ ಬದಲು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಿ.
ವಿಭಿನ್ನ ಭಾಷೆಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ: ಲೇಔಟ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು LTR ಮತ್ತು RTL ಭಾಷೆಗಳು ಸೇರಿದಂತೆ ವಿವಿಧ ಭಾಷೆಗಳಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ.
ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಪಾಲಿಫಿಲ್ ಬಳಸಿ: ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒದಗಿಸಲು ಪಾಲಿಫಿಲ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ.
ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಬರವಣಿಗೆಯ ಶೈಲಿ ಅಥವಾ ದಿಕ್ಕನ್ನು ಲೆಕ್ಕಿಸದೆ, ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ಅಂಗವಿಕಲ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಅದನ್ನು ಸ್ಥಿರವಾಗಿಡಿ: ಒಮ್ಮೆ ನೀವು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಲು ಪ್ರಾರಂಭಿಸಿದರೆ, ಗೊಂದಲವನ್ನು ತಪ್ಪಿಸಲು ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಾದ್ಯಂತ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಿ.
ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ದಾಖಲಿಸಿ: ನೀವು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಏಕೆ ಬಳಸುತ್ತಿದ್ದೀರಿ ಮತ್ತು ಅವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ವಿವರಿಸಲು ನಿಮ್ಮ CSS ಗೆ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ.

ತೀರ್ಮಾನ

CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ, ಅಂತರರಾಷ್ಟ್ರೀಕೃತ ವೆಬ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದೆ. ಬರವಣಿಗೆಯ ಶೈಲಿಗಳು ಮತ್ತು ಪಠ್ಯ ದಿಕ್ಕಿನ ಆಧಾರವಾಗಿರುವ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ನಿಮ್ಮ CSS ನಲ್ಲಿ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಪೂರೈಸುವ ಮತ್ತು ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಸ್ವೀಕರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕಾರ್ಯಪ್ರವಾಹದಲ್ಲಿ ಹೊಸ ಮಟ್ಟದ ನಮ್ಯತೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಸಣ್ಣದಾಗಿ ಪ್ರಾರಂಭಿಸಿ, ಪ್ರಯೋಗ ಮಾಡಿ, ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಯೋಜನೆಗಳಲ್ಲಿ ಹಂತಹಂತವಾಗಿ ಅಳವಡಿಸಿಕೊಳ್ಳಿ. ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕೆ ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಜಾಗತಿಕವಾಗಿ-ಅರಿವುಳ್ಳ ವಿಧಾನದ ಪ್ರಯೋಜನಗಳನ್ನು ನೀವು ಶೀಘ್ರದಲ್ಲೇ ನೋಡುತ್ತೀರಿ. ವೆಬ್ ಹೆಚ್ಚು ಜಾಗತಿಕವಾಗುತ್ತಾ ಹೋದಂತೆ, ಈ ತಂತ್ರಗಳ ಪ್ರಾಮುಖ್ಯತೆ ಮಾತ್ರ ಬೆಳೆಯುತ್ತದೆ.

MLOG