Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ลำดับตอนที่ #112 : [lesson] CSS > Styling Text ... จัดรูปแบบข้อความ (2)

Text Indent เยื้องเข้าให้บรรทัดแรกของย่อหน้า

คุณสมบัตินี้กำหนดค่าได้สองแบบค่ะ คือเป็น px (pixel) กับเป็น % (เปอร์เซนต์)

<style type="text/css">
p.indent {text-indent:50px;}
</style>

นี่คือตัวอย่างย่อหน้าเท่านั้น ข้อความในนี้มิจำเป็นต้องสนใจอ่านแต่อย่างใด อ่า... เมื่อไหร่จะเขียนยาวพอจนจะเรียกได้ว่าย่อหน้าล่ะนี่ เอาแค่ให้พอเห็นว่าบรรทัดแรกมันเยื้องเข้าไปก็พอล่ะมั้ง ดังนั้นก็ถ้ายาวเกินหนึ่งบรรทัดก็คงพอแล้ว เอาล่ะ แค่นี้แหละ ช่างเป็นย่อหน้าตัวอย่างที่หาสาระใดๆ เลยไม่ได้จริงๆ

จากย่อหน้านี้ จะเห็นได้ว่า ตัวเยื้องเข้ามา ไม่ได้ใช้การเว้นวรรค หรือ tab ใดๆ ช่วย ใช้ text-indent ซึ่งเป็น property หนึ่งของ css เข้ามาช่วยเพียงอย่างเดียวเท่านั้น

Letter Spacing ระยะห่างระหว่างตัวอักษร

ค่ามาตรฐานคือ normal ส่วนค่าอื่นๆ จะเป็นหน่วยความยาว

<style type="text/css">
.h1 {letter-spacing:11px;}
.h2 {letter-spacing:-1px;}
</style>

ย่อหน้านี้ใช้ .h1 มาควบคุม

ย่อหน้านี้ใช้ .h2 มาควบคุม

Word Spacing ระยะห่างระหว่างคำ

คุณสมบัตินี้เหมาะกับภาษาอังกฤษค่ะ ถ้าเป็นภาษาไทยน่าจะเรียกว่าจะระยะระหว่างประโยคมากกว่า เอาเป็นว่ามันเป็นการกำหนดความกว้างของการเว้นวรรคน่ะค่ะ

ค่ามาตรฐานคือ normal ส่วนค่าอื่นๆ จะเป็นหน่วยความยาว เช่นเดียวกับ letter-spacing

<style type="text/css">
p.wp {word-spacing:30px;}
</style>

This is some text. This is some text.
ลองภาษาไทยดูบ้าง ทดสอบๆ เว้นวรรคกว้างจริงๆ

Line Height ระยะห่างระหว่างบรรทัด

ค่ามาตรฐานคือ normal ถ้าจะเปลี่ยนเป็นค่าอื่นๆ ก็สามารถกำหนดเป็น ตัวเลข (number), ความยาว (length), หรือ เปอร์เซนต์ (%) ก็ได้ค่ะ

<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>

ย่อหน้านี้เว้นบรรทัดแบบค่ามาตรฐาน ซึ่งก็ประมาณ 110% ถึง 120% ขึ้นอยู่กับ broswers ย่อหน้านี้ถูกจัดด้วย standard line-height

ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ ย่อหน้านี้เว้นบรรทัดแคบๆ

ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ ย่อหน้านี้เว้นบรรทัดกว้างๆ

Vertical Align ตำแหน่งในแนวแกน y (แนวตั้ง)

คุณสมบัตินี้นิยมให้จัดข้อความคู่กับภาพค่ะ

<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>

ภาพ กับค่าตั้งต้นในการจัดวาง

ภาพ กับ vertical-align:text-top;

ภาพ กับ vertical-align:text-bottom;

ค่าที่ใช้ได้ดูจากตารางสรุปได้เลยนะคะ

ตารางสรุป properties และ values ที่เหลือของ text

Property	Description	Values	CSS
color	Sets the color of a text	color	1
direction	Sets the text direction	ltr rtl	2
line-height	Sets the distance between lines	normal number length %	1
letter-spacing	Increase or decrease the space between characters	normal length	1
text-align	Aligns the text in an element	left right center justify	1
text-decoration	Adds decoration to text	none underline overline line-through blink	1
text-indent	Indents the first line of text in an element	length %	1
text-shadow		none color length
text-transform	Controls the letters in an element	none capitalize uppercase lowercase	1
unicode-bidi		normal embed bidi-override	2
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	1
white-space	Sets how white space inside an element is handled	normal pre nowrap	1
word-spacing	Increase or decrease the space between words	normal length	1