Design

Media Print CSS

မဂၤလာပါ။
ညီမကေတာ့ မဆုရည္ထြန္း ျဖစ္ပါတယ္။ ယခု 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 လုပ္ေပးတာမို႕ လိုအပ္ခ်က္မ်ားရွိရင္လဲ နားလည္ေပးပါေနာ္။
ဖတ္ရွု ေပးတဲ့အတြက္အားလံုးကိုေက်းဇူးတင္ပါတယ္ရွင့္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *