Print CSS ဖိုင်တည်ဆောက်ခြင်း

Website တစ်ခုမှာရှိတဲ့ Webpage ‌တွေကို Print ထုတ်ချင်တဲ့အခါမှာ User ‌တွေအ‌နေနှင့် printscreen ဖမ်းပြီးထုတ်တာ ရှိသလို Browser ရဲ့ Print Command ကိုသုံးပြီးထုတ်တာလည်းရှိပါတယ်။  Printscreen ဖမ်းပြီးထုတ်တာဟာ Webpage မှာမြင်ရတဲ့ အတိုင်းလိုချင်လို့ပါ။  ဒါ‌ပေမယ့် တစ်ချို့ Webpage ‌တွေအတွက် အဆင်‌ေပြပြီး တစ်ချို့ Webpage ‌တွေအတွက် အဆင်မ‌ေပြတဲ့အခါ Print Command နဲ့ထုတ်ကြပါတယ်။  သို့‌သော် Website တစ်ခုဟာ ကျွန်‌တော်တို့သိတဲ့အတိုင်း css, jquery, etc စ‌သော script code ‌တွေနှင့်‌ပေါင်းစပ် ဖွဲ့စည်းထားပါတယ်။  Print Command နဲ့ Print မထုတ်ခင် Print Preview ကြည့်တဲ့အခါ အဲ့ဒီ script codeတွေကြောင့် Webpage မှာမြင်ရတဲ့အတိုင်း မ‌ပေါ်ပါဘူး ကျွန်‌တော်တို့ထုတ်မယ့် Webpage ရဲ့တစ်ချို့ ကိုယ်လိုချင်တဲ့ စာသား‌တွေကို ဖုံး‌နေတာ၊ ထပ်‌နေတာ စတာ‌တွေဖြစ်‌နေတတ်ပါတယ်။  အဲ့ဒီ‌တော့ Webpage မှာမလိုအပ်တာ‌တွေကို ဖြုတ်ပြီး လိုအပ်တာ‌တွေကို Print ထုတ်တဲ့အခါ ရှင်းရှင်းလင်းလင်း ဖြစ်‌စေဖို့ user-friendly format ဖြစ်‌စေမယ့် css ဖိုင်တစ်ခု ဖန်တီးထားရပါ့မယ်။  အဲ့ဒီ css ဖိုင်တည်‌ဆောက်ဖို့ မခက်ပါဘူး သာမာန် css ဖိုင်တည်‌ဆောက်သလိုပါပဲ။  ဒီ print format ချ‌ပေးမယ့် css ဖိုင်ကို ပုံမှန် css ဖိုင်ကို ‌ခေါ်ထည့်သလို Webpage မှာခုလို ထည့်ပါတယ်။  ဒီ css ဖိုင်ကို တခြား css ဖိုင်‌တွေ အားလုံးရဲ့‌နောက်ဆုံးမှာ ထည့်သွင်းရပါမယ်။

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

media ဆိုတဲ့‌နေရာမှာ print ကိုအသုံးပြုလိုက်ခြင်းဖြင့် ဒီ css ဖိုင်ဟာ Webpage ကို print ထုတ်တဲ့အခါမှာ သုံးမယ်လို့ပြောလိုက်တဲ့သ‌ဘောပါ။  ဒီ css ဖိုင်ဟာ တကယ်‌တော့ Website မှာ အဓိက အသုံးပြုထားတဲ့ css command ‌တွေကို override လုပ်ပစ်လိုက်တာပါ။  ဒီ‌တော့ ဒီ css ဖိုင်‌လေးထဲမှာ အဓိက Webpageမှာ အသုံးပြုနေတဲ့ css ဖိုင်‌တွေထဲက မလိုအပ်တဲ့ items ‌တွေကို Print ထုတ်တဲ့အခါ ဘယ်လို ဖြုတ်ချမလည်း။  css နှင့် ရင်းနှီးကျွမ်းဝင်‌နေတဲ့သူ‌တွေအတွက် က‌တော့ မခက်ပါဘူး...

ဥပမာ။    ။


    <div id="main">

            .................
            .................
        <div id="header">
            .................
            .................
        </div>
            .................

            .................

        <div id="nav">

            .................
            .................
        </div>
            .................
            .................
        <div id="content">
            .................
            .................
            <span class="lighttext">Hello This Is My Content</span>
        </div>
    </div>

အခုလိုမျိုး Webpage တစ်ခုမှာရှိ‌နေတဲ့</div> tab ကို Print ထုတ်တဲ့အခါ မ‌ပေါ်စေချင်ဘူးဆိုရင်....

#header, #nav, .noprint
{
    display: none;
}

Webpage ရဲ့ width, margin,etc စတာ‌တွေ Print ထုတ်တဲ့အခါ ပြောင်းချင်တယ်ဆိုရင်...

#main, #content
{
    width: 100%; margin: 0; float: none;
}

Content တွေရဲ့ စလုံးအ‌ရောင်တွေ ပြောင်းချင်တယ်ဆိုရင်....

.lighttext
{
color: #000
}

စသည်ဖြင့် မလိုအပ်တာဖြုတ်၊ ပြင်ချင်တာပြင်၊ ပြောင်းချင်တာ‌ပြောင်း လိုက်တဲ့အခါမှာ Print ထုတ်ဖို့ရန် User အတွက် အဆင်‌ပြေစေမယ့် css ဖိုင်တစ်ခုကို ရသွားပါ‌တော့တယ်။

ကိုစစ်ကိုင်း