မင်္ဂလာပါ။
ညီမကတော့ မဆုရည်ထွန်း ဖြစ်ပါတယ်။ ယခု Spiceworks Myanmar မှာ Web Designer အဖြစ်ဝင်ရောက်လုပ်ကိုင်နေပါတယ်။ဒီတစ်ခေါက်မှာတော့ Media Print CSS အကြောင်းကိုပြောပြပေးချင်ပါတယ်။ တချို့ သောလူတွေနဲ့တော့ ရင်းနှီးမှုရှိနေနိုင်ပေမဲ့ တချို့သော လူတွေအတွက်တော့ အစိမ်းသက်သက်ဖြစ်နေနိုင်ပါတယ်။ ညီမကိုယ်တိုင်လဲ အချိန်အတိုင်းအတာတစ်ခုထိပေးပြီးလေ့လာခဲ့ရပါတယ်။ဒါကြောင့် ညီမလိုပဲ Print CSS ကိုစိတ်ဝင်စားလို့လေ့လာမည့်လူတွေအတွက် အနည်းငယ်ပဲဖြစ်ဖြစ် အထောက်အကူရအောင် knowledge sharing လုပ်ပေးချင်ပါတယ်။

What is Print CSS?

အရင်ဆုံး Print CSS ကို မလေ့လာခင် Print CSS ဆိုတာဘာလဲပေါ့နော်။ Web designer ၊ Web Developer တွေနဲ့ ရင်းနှီးပြီးသားဖြစ်တဲ့ HTML,CSS ကို အသုံးပြုပြီး ရေးထားတဲ့ input data အားလုံးကို Pdf Document အနေနဲ့ ပြန်လည်ထုတ်ယူကြည့်ရှုနိုင်အောင် သုံးတဲ့ CSS ကို Media Print CSS လို့ ခေါ်ပါတယ်။
Web Page တွေကို အလွယ်တကူ Print ထုတ်နိုင်ရန် ရည်ရွယ်ပြီး Media Print CSS ဆိုတဲ့ CSS ကို CSS ကနေပဲ extension အသစ်အနေနဲ့ ထုတ်ပေးခဲ့တာဖြစ်ပါတယ်။
အရေးကြီးတာတစ်ခုကတော့ Web Page ကို pdf Document အနေနဲ့ print ထုတ်ကြည့်နိုင်အောင် ရေးတဲ့ CSS ဆိုသော်ငြားလည်း Web page နဲ့ စာရွက်ပုံစံ မှာမြင်ရတဲ့ ပုံစံ ကတော့ တူညီနိုင်မှာမဟုတ်ဘူးဆိုတာ မှတ်သားထားရမှာဖြစ်ပါတယ်။ မိမိရဲ့ Web Page နဲ့ အနီးစပ်ဆုံးအခြေအနေတစ်ခုထိသာ ရရှိမှာဖြစ်ပါတယ်။

Print Vs. Web page ?

Web Page နဲ့ ပဲ ကြည့်ကြည့် ၊ print ထုတ်ပြီး စာရွက်နဲ့ပဲ ကြည့်ကြည့် user ကို မိမိ ပေးချင်တဲ့ data information တွေက အကြောင်းအရာတူညီနိုင်ပေမဲ့ print ထုတ်လိုက်တဲ့ စာရွက်မှာတော့ Web page ရဲ့ အလုပ်လုပ်ပုံကဲ့သို့ ကြည့်ရှုနိုင်မှာမဟုတ်ပါဘူး။
အဓိကအချက်တွေအနေဖြင့် Web Page မှာ Height ဘယ်လောက်ရှည်ရှည် Scroll ဆွဲပြီးကြည့်ရှုနိုင်သော်လည်း စာရွက်မှာတော့ စာရွက် size ရှိသလောက်ပဲ ကြည့်ရှု့နိုင်မှာဖြစ်ပါတယ်။
နောက်တစ်ချက်ကတော့ Web page တစ်ခုနဲ့ တစ်ခု ကူးပြောင်းရန် Button (or) Link တွေအသုံးပြုပြီးရေးနိုင်ပေမဲ့ အဲ့ဒီ Button(or) Link တွေက စာရွက်ပေါ်မှာ image တစ်ခု ၊ text စာသား တစ်ခု အနေဖြင့်သာ တည်ရှိနေနိုင်မှာဖြစ်ပါတယ်။

Definite Benefit Of Print style sheets

Web Page ရှိနေပင်မဲ့ print ထုတ်ပီး ဘာကြောင့် စာရွက်နဲ့ ကြည့်ကြတာလဲ?
Print CSS ပေါ်ထွက်လာရခြင်းရဲ့ အဓိကအကြောင်းအရင်းကတော့ Screen တွေပေါ်မှာ စာဖတ်ရခြင်းထက် စာရွက်ပေါ်မှာ စာဖတ်ရခြင်းက မျက်စိထိခိုက်မှုကိုလျော့ကျစေခြင်းကြောင့် ဖြစ်ပါတယ်။
နောက် တစ်ချက်ကတော့ Internet မရရှိနိုင်သော နေရာဒေသတွေမှာမိမိရဲ့ Web Page ပါ အကြောင်းအရာတွေကို အလွယ်တကူ စာရွက်ပေါ်မှာ ရှင်းလင်းပြသနိုင်သောကြောင့်ဖြစ်ပါတယ်။

မိမိရဲ့ Web Page ကို CSS Print ဘယ်လိုချိတ်မလဲ?

Media Print CSS အကြောင်း intro ပြောပြပြီးသွားပြီဆိုတော့ မိမိ web page ကို Print CSS နဲ့ဘယ်လိုချိတ်မလဲဆိုတာပြောပြပေးသွားမှာဖြစ်ပါတယ်။
Media Print Css ကို မိမိရဲ့ html file ထဲမှာ အောက်ပါအတိုင်း link ချိတ်ပေးရမှာဖြစ်ပါတယ်။

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

နောက် တစ်ခုကတော့ print.css ဆိုပီး css file တစ်ခုဆောက်ပေးရမှာဖြစ်ပါတယ်။
Print.css file ထဲမှာတော့ CSS style element တွေအားလုံးကို အောက်ပါအတိုင်း media query ခြုံရေးရမှာဖြစ်ပါတယ်ရှင့်။

 
@media print{
	p.body{
	font-family: Georgia, ‘Times New Roman’, serif; ;
	}
} 

media=”print” ဆိုပီးခေါ်သုံးထားတဲ့အတွက် Web page မှာ အသုံးပြုမည့် CSS Style Element တွေနဲ့ ငြိမှာစိုးရိမ်စရာမလိုတော့ပါဘူး။print ထုတ်ဖို့အတွက် CSS Element တွေကိုစိတ်ကြိုက်ပြင်လို့ရမှာဖြစ်ပါတယ်။
print ထုတ်ဖို့ set up လုပ်ပြီးသွားတော့ မိမိရဲ့ Web Page ကို page layout ချပေးရမှာဖြစ်ပါတယ်။

မိမိရဲ့ Web Page ကို စာရွက်မှာ အဆင်ပြေပြေပေါ်အောင် page layout ဘယ်လိုချမလဲ?

စာရွက်size တွေကတော့ ပုံစံအမျိုူးမျိူးရှိပါတယ်။ A4, A5, Legal ,letter စသည်ဖြင့် မိမိ အဆင်ပြေမည့် size ကို css ချိန်ပေးရမှာဖြစ်ပါတယ်။
Example: A4 စာရွက်တွင် print ထုတ်ရန်အတွက် @page ဆိုပီး အောက်ပါအတိုင်း size နဲ့ margin အကွာအဝေး ချိန်ပေးရမှာဖြစ်ပါတယ်။

 
@media print{
        @ page{
	size: : 21.0cm  29.7cm;/* width height*/
	margin: 2.10cm 2.97cm;
        }
} 

Basic Steps of CSS Print

Print ထုတ်ရန် စာရွက်အမျိုးအစား ချိန်ပြီးရင်တော့ မိမိရဲ့ Web Page ကို print ထုတ်နိုင်ဖို့ စပြီးတော့ CSS ချိန်လို့ရပါပြီ။
အောက်ပါအချက်တွေကတော့ Print CSS ရေးရမှာ သိထားသင့်တဲ့အချက်တွေပဲဖြစ်ပါတယ်။

1. Remove the Navigation

   စာရွက်ပေါ်မှာ link များ နှိပ်လို့ မရသောကြောင့် အရေးကြီးသော main menu များကလွဲပြီး ကျန်သော menu link,nav link အားလုံး ကို ဖျောက်သင့်ပါတယ်။

    #nav, #sidebar { display: none; }

2. Enlarge the Content Area

   Web page မှာ sidebar တွေခွဲထားရင် Content width က 100% အပြည့်မပေးနိုင်ပါဘူး။
   print စာရွက် မှာတော့ Sidebar တွေ link တွေ ဖယ်လိုက်တဲ့ အတွက် Content width ကို 100% ပြန်ထားပေးရမှာဖြစ်ပါတယ်။

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

3. Reset the Background Colors

   Web page မှာ Background color ပေးထားပေမဲ့ print လုပ်တဲ့အချိန် မလိုအပ်ရင်တော့ background color ကိုအောက်ပါအတိုင်း reset ချပေးစေချင်ပါတယ်။

   body { background: white; } 
   #content { background: transparent; }
   

4. Reset Text Colors

   Web page မှာ Background colorပေါ်လိုက်ပြီး text color ကို လိုက်ဖက်မှုရှိအောင် ပေးထားပေမဲ့ print လုပ်တဲ့အချိန် print css မှာ Text color အားလုံးကို လည်းအောက်ပါအတိုင်း reset ချပေးစေချင်ပါတယ်။

   #author { color: #111; }
   

5. What About Font Size & Font Family?

   အထူးပြုပြောပြချင်သော Text များကလွဲရင် ကျန်သော text အားလုံး၏ size နှင့် font family ကိုအောက်ပါအတိုင်း Reset ချပေးပါ။

   body { font-family: Georgia, ‘Times New Roman’, serif; }
   p { font-size: 12pt; }
   

6. page-break property

   print css ရေးသားတဲ့ အချိန် break လုပ်ချင်တဲ့ element ကို page-break property သတ်မှတ်ပေးရမှာဖြစ်ပါတယ်။

   The properties:
   • page-break-before,
   • page-break-after and
   • page-break-inside help to define how a document should behave when printed.

   Note: You cannot use this property on an empty <div> or on absolutely positioned elements.

    
    h1 {page-break-before: always;} 
   
    pre, blockquote {page-break-inside: avoid;}
   
    footer {page-break-after: always;}
   

   page_break property ကို example အနေနဲ့ အောက်ပါလင့် ကို download လုပ်ပြီးလေ့လာပေးပါနော်။
   page_break_print_css_ex

တခြား Design ပိုင်းနှင့် ပတ်သက်သော CSS များကတော့ မိမိ စိတ်ကူးရှိသည့်အတိုင်း မိမိ Web Page နှင့် အနီးစပ်ဆုံးဖြစ်အောင် ပြင်ပေးရမှာဖြစ်ပါတယ်။
ညီမကတော့ table ကို CSS Print နဲ့ print ထုတ်ဖို့ ဘယ်လိုlayout ချရမလဲဆိုတဲ့ example လေး ပြောပြပေးပါမယ်။
အောက်ပါလင့် ကို download လုပ်ပြီးလေ့လာပေးပါနော်။
table_print_css_ex

မိမရဲ့ Web Page ကို print css နဲ့ layout ချပြီးရင် မိမိ ရဲ့ Web Page မှာ Ctrl+P နှိပ်လိုက်ရုံဖြင့် print ထုတ်ရန် ချိန်ထားသော print layout ကို အလွယ်တကူ ရရှိမှာဖြစ်ပါတယ်ရှင့်။
ညီမနားလည်သလောက် knowledge sharing လုပ်ပေးတာမို့ လိုအပ်ချက်များရှိရင်လဲ နားလည်ပေးပါနော်။
ဖတ်ရှု ပေးတဲ့အတွက်အားလုံးကိုကျေးဇူးတင်ပါတယ်ရှင့်။