Text formatting ဆိုတာကတော့ စာလုံးတွေကို အရောင်ထည့်တာတွေ နောက်ပြီး font တွေပြောင်းတာ alignment လုပ်တာ စတာတွေကို css ကို ဆောင်ရွက်လို့ရပါတယ်။
Text Color
text color ကိုတော့ CSS မှာ color လို့သုံးပါတယ်။ အောက်မှာ ဥပမာ ကြည့်ပါ။
body { color:#FF0000; }
လို့ဆိုရင် body စာလုံးတွေက အနီရောင်နဲ့ ပြပေးမှာပါ။
Text alignment
text alignment ကတော့ left, right , center,justify ဆိုပြီး သတ်မှတ်ပေးတာပါ။ ကျွန်တော်တို့ html မှာက align နဲ့ လုပ်ခဲ့တာ မှတ်မိအုံးမယ်ထင်ပါတယ်။ CSS မှာကတော့
p { text-align: center; }
h1 { text-align: right; }
h2 { text-align : justify }
left ကတော့ default ပါ။ ဒါလေးတွေက လွယ်သေးတော့ ကိုယ့်ဘာသာ ကိုယ်စမ်းကြည့်လိုက်ပါ။
Text Transformation
ကျွန်တော်တို့တွေ HTML မှာ upper case တွေ lower case တွေပြောင်းချင်ရင် စာတွေ ပြန်ပြင်ရိုက်ရပါတယ်။ CSS သုံးရင် အဲလို ပြန်ပြင်ရိုက်တဲ့ ပြဿနာ ရှင်းသွားပါတယ်။ အောက်က example လေး ကို ကြည့်ကြည့်ပါ။
<html>
<head>
<title>Sample</title>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
<body>
<p class="uppercase">uppder case</p>
<p class="lowercase">LOWER CASE</p>
<p class="capitalize">capitalize</p>
</body>
</head>
</html>
Text Indentation
စာလုံးတွေကိုရွှေ့ချင်တယ်ဆိုရင် indentation ကို သုံးလို့ရပါတယ်။ အောက်က ဥပမာလေး ကိုကြည့်ကြည့်ပါ။
<html>
<head>
<title>Sample</title>
<style type="text/css">
p {text-indent:50px;}
</style>
<body>
<p>
Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
</p>
</body>
</head>
</html>
Space between characters
Characters တစ်ခုနဲ့ တစ်ခုကြား space တွေကို ခြားချင်ရင်တော့ letter-spacing ဆိုတာကို သုံးလို့ရပါတယ်။
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
Space Between Lines
Characters တစ်ခုနဲ့ တစ်ခုကြား space အကွာအဝေး ချိန်ညှိလို့ရသလို line တစ်ခုနဲ့ တစ်ခုကြားလည်း line-height နဲ့ ချိန်ညှိလို့ရပါတယ်။ အောက်က example လေးကို လေ့လာကြည့်ပါ။
<html>
<head>
<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
Right To Left Text
ဒါကတော့ ကျွန်တော်တို့တွေ သုံးခဲတယ်။ left to right ရေးရတဲ့ ဘာသာစကားတွေအတွက် သုံးတာပါ။ ဥပမာ တော့ မပြတော့ဘူး။ ဘယ်လိုပေါ်လဲ သိချင်ရင် စမ်းကြည့်နိုင်ပါတယ်။
p{direction:rtl;}
Word Spacing
Character spacing , line spacing တွေပြီးတော့ word spacing ပေါ့။
<html>
<head>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>
Nowrap
စာလုံးတွေကို wrap မဖြစ်ချင်ဘူး။ စာလုံးက တစ်တန်းပြည့်သွားပေမယ့် အောက်တစ်လိုင်း မဆင်းသွား စေချင်ဘူးဆိုရင် white-space ကို nowrap ပေးရပါတယ်။
p
{
white-space:nowrap;
}
ကိုယ့်ဘာသာ ကိုယ်စမ်းကြည့်လိုက်ပေါ့။
Vertical Align
image တွေမှာ ကျွန်တော်တို့တွေ HTML တုန်းက align တွေလိုက်ထည့်ရတယ်။ text align ညှိတာပေါ့။ အဲလိုမျိုးပဲ CSS မှာလည်း သုံးလို့ရပါတယ်။
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>
Text-shadow
စာလုံးတွေနောက်မှာ shadow ထည့်ချင်တဲ့အခါမှာတော့ text-shadow ကို သုံးနိုင်ပါတယ်။
<html>
<head>
<style>
p.test {
text-shadow: #6374AB 20px 25px 2px;
}
</style>
</head>
<body>
<p class="test">This is txt shadow</p>
</body>
</html>
text-shadow: #အရောင် , X , Y, bluer ဆိုပြီး ထည့်ပေးရတာပါ။
CSS Text Properties
Property |
Description |
Values |
|
color |
text color |
color |
|
direction |
text direction |
ltr rtl |
|
line-height |
line တစ်ခုနဲ့ တစ်ခုကြား အမြင့် |
normal number length % |
|
letter-spacing |
characters တစ်ခုနဲ့ တစ်ခုကြား အကွာအဝေး |
normal length |
|
text-align |
text align ညှိခြင်း |
left right center justify |
|
text-decoration |
add decoration to text |
none underline overline line-through blink |
|
text-indent |
indent ရွှေ့ခြင်း |
length % |
|
text-shadow |
အရိပ်ထည့်ခြင်း |
none color length |
|
text-transform |
uppercase , lowercase ပြောင်းခြင်း |
none capitalize uppercase lowercase |
|
vertical-align |
vertical align |
baseline sub super top text-top middle bottom text-btoom length % |
|
white-space |
wrap text လုပ်မလုပ် |
normal pre nowrap |
|
word-spacing |
word တစ်ခုနဲ့တစ်ခုကြား spacing |
normal length |
