Web Character Simplification Chart 0.1 #opendream

ก่อนจะประมวลผลข้อความ เราจำเป็นต้องทำความสะอาดข้อความเสียหน่อย ทั่ว ๆ ไปที่จำเป็นต้องทำ ก็เช่น แปลง new line (\r\n หรือ \n), หรือแปลงให้อยู่ในชุดอักขระ (character set) ที่โปรแกรมใน processing pipeline จะทำงานได้ เช่นแปลง ä เป็น ae หรือแปลง “ ” เป็น ” “, หรือการ normalize ลำดับอักขระ เช่น น.หนู+สระอำ+ไม้โท → น.หนู+ไม้โท+สระอำ, หรือไปถึงขั้นซับซ้อน อย่างแก้ตัวสะกด

(กรณีเป็นงานลักษณะจดหมายเหตุ หรือ archival ก็อาจจำเป็นต้องเก็บตัว raw text ก่อนแปลงเอาไว้ด้วย เพราะการแปลงอาจจะ(และมักจะ)เป็น lossy คือแปลงไปแล้วแปลงกลับมาได้ไม่เหมือนเดิม เช่นตัวอย่างข้างบน ที่แปลง “ ” เป็น ” “)

การทำความสะอาดข้อความ หรือ text cleansing นี้ มีจุดประสงค์หลายอย่าง อย่างหนึ่งก็เพื่อเพิ่มความต้องตรงกัน (integrity) ภายในเนื้อข้อความ ซึ่งกรณีถ้าจะเอาข้อความนี้ไปประมวลผลทางสถิติ เช่นเอาไปฝึกเครื่อง (machine learning) ความต้องตรงกันภายในข้อความนี้ ก็มีผลต่อความแม่นยำของตัวแบบที่จะฝึกได้

จุดประสงค์อีกอย่างของการทำความสะอาดข้อความ ก็เพื่อลดความซับซ้อนของการประมวลผลด้วย ไม่ว่าจะเป็นการลดความซับซ้อนของตัวแบบ หรือการลดความซับซ้อนของเงื่อนไขในโปรแกรม เช่น ทำให้เขียน regular expression ได้สะดวกขึ้น

สำหรับแอปพลิเคชั่นการค้นหาและการทำดัชนี การทำความสะอาดข้อความ รวมไปถึงการทำให้ข้อความมันซับซ้อนน้อยลง (ไม่ว่าจะในทางลำดับอักษร ซึ่งจะมีผลต่อขนาดของ word set หรือการลดขนาดของ character set ด้วยการยุบตัวอักษรบางตัวเข้าด้วยกัน) จะช่วยให้ดัชนีมีขนาดเล็กลงด้วย และถ้าใช้ประกอบกับตารางการแทนอักษร/คำ (replacement table) ก็จะช่วยให้โอกาสการเจอคำที่ค้นหา มีมากขึ้น เนื่องจากลดผลกระทบจากการสะกดไม่ตรงกัน (spelling variations) (จริง ๆ จะใช้ replacement table อย่างเดียวก็ได้ แต่กรณีนั้น search space ก็จะใหญ่ขึ้น มีผลต่อประสิทธิภาพ)

ในตอนที่เขียน JavaScript สำหรับใช้กับ Roti ก็คิดไว้าว่าจะเจอปัญหาลักษณะนี้ ซึ่งจะมีผลต่อการคำนวณหาบล็อกโพสต์ที่ใกล้เคียง (ดูตัวอย่างได้ที่ท้ายโพสต์นี้ ตรงที่เขียนว่า ‘roti thinks you may like these posts…’) เลยให้จาวาสคริปต์ทำความสะอาดข้อความนิดหน่อย ก่อนจะส่งไปเซิร์ฟเวอร์

เนื่องจาก Roti ทำงานกับเอกสารเว็บ ซึ่งมี ‘ปัญหา’ อีกอย่าง คือการใช้ HTML/XML entities แทนตัวอักษร เช่นใช้ & เพื่อแทนอักษร & ดังนั้นก่อนจะทำอะไรกับข้อความ จึงควร decode entities พวกนี้ออกมาก่อน

กรณีของ HTML entities ถ้าใช้ PHP สามารถใช้ฟังก์ชั่น html_entity_decode($text) ได้เลย แต่ในจาวาสคริปต์มันไม่มี (หรือผมไม่รู้ว่ามันมี) ก็เลยใช้แทนที่สตริงแบบบ้าน ๆ ไป

ตารางข้างล่างปรับแก้มาจากตัวจาวาสคริปต์ roticlient.js และใส่รายละเอียดเพิ่มเติมนิดหน่อย ยินดีรับคำแนะนำครับ

possible replacements ในตารางนั้น เป็นเพียงคำแนะนำตั้งต้น การจะเลือกใช้อะไร ขึ้นอยู่กับแอปพลิเคชั่นด้วย เช่น ตัวเลือกที่เหมาะกับการเอาไปทำดัชนี ก็อาจจะไม่เหมือนกับตัวเลือกที่เหมาะกับการเอาไปแสดงผล เช่น zero-width space ถ้าทำดัชนี การแทนด้วย space น่าจะเหมาะ แต่ถ้าจะเอาไปแสดงผล การลบมันทิ้งไปเลย น่าจะเหมาะกว่า

Web Character Simplification Chart 0.1

Throw away extra semantics for a simpler text processing. This is only a suggestion. Apply to your needs accordingly.

Character Name Character Unicode ASCII range? HTML Entities Possible Replacements
Space     yes    
Non-breaking space   U+00A0 yes   (space)
Zerowidth space   U+200B     (space), <delete>
 
Soft hyphen   U+00AD yes &shy; <delete>
 
Hyphen-Minus U+002D yes    
Hyphen U+2010     – (hyphen-minus)
Minus sign U+2212   &minus;
Figure dash U+2012    
En dash U+2013   &ndash; -, —
Em dash U+2014   &mdash; -, —
Horizontal bar U+2015    
Armenian hyphen ֊ U+058A    
Hebrew magaf ־ U+05BE    
Mongolian todo hyphen U+1806    
Japanese chōonpu U+30FC    
 
Hyphen bullet U+2043     * (star), -, <delete>
Small bullet U+2022     *, -, <delete>
 
Tilde ~ U+007E yes &tilde;  
Swung dash ˜ U+2053     ~ (tilde)
Wave dash U+301C     ~
Wavy dash U+3030     ~

ด้านล่างนี้ เป็นตัวอย่างโค้ดที่แทนที่ตัวอักษรต่าง ๆ จาก roticlient.js


return str.replace(/(&nbsp;|&#8208;|&#8210;|&ndash;|&#8211;|&mdash;|&#8212;|&#8213;|&#8275)/g, ' ')
.replace(/(&shy;|&#xAD;|&#173;|&#x200B;|&#8203)/g,'')
.replace(/[\u200b\u200d\u00ad]/g, '')
.replace(/[!\?;:"'`“”^\*\+\-_\(\)\[\]\{\}#@&~\.,\\\/\|]/g, ' ')
.replace(/\s+/g, ' ');

ติดตามการพัฒนา Roti ได้จาก Opendream’s blog

(โพสต์นี้ให้ @pittaya เนื่องจากเคยถามเอาไว้เมื่อนานเมือกแล้ว)

technorati tags:
,
,

Provinces of Thailand HTML selection box

HTML option’s values according to TIS 1099-2535 Standard for Province Identification Codes for Data Interchange

ค่า value ของแต่ละ option ตาม รหัสจังหวัดเพื่อการแลกเปลี่ยนข้อมูล (มอก. 1099-2535)

download: จังหวัดในประเทศไทย HTML selection box

technorati tags:
,
,

get semantic with HTML 5

Lachlan Hunt รีวิว HTML 5 ให้เราดูกันว่าจะมีอะไรเปลี่ยนแปลงไปในข้อกำหนด HTML รุ่นต่อไปบ้าง พร้อมตัวอย่างและภาพประกอบ (โดย Kevin Cornell) เข้าใจง่าย

เมื่อเทียบกับ HTML 4 (รุ่นปัจจุบัน) แล้ว HTML 5 นอกจากจะมีแท็กใหม่ ๆ ที่รองรับเทคโนโลยีเว็บที่พัฒนาขึ้น เช่นแท็กเกี่ยวกับไฟล์ภาพเคลื่อนไหวและเสียงแล้ว อีกจุดสำคัญของ HTML 5 ก็คือ มันจะมี โครงสร้าง (structure) และ ความหมาย (semantic) ที่ชัดเจนขึ้นด้วย

เมนู ที่ปรากฎอยู่บนจอ ก็จะถูกระบุว่าเป็นเมนู ไม่ใช่แค่ตารางที่วางอยู่ด้านขวาของจอ
ชื่อหนังสือ ที่ปรากฎอยู่บนจอ ก็จะถูกระบุว่าเป็นชื่อหนังสือ ไม่ใช่แค่ข้อความอันหนึ่งที่อยู่หลังคำว่า “ชื่อหนังสือ:”

ปัจจุบันนี้ นักออกแบบ/พัฒนาเว็บส่วนหนึ่ง พยายามที่จะเขียนโค้ดหน้าเว็บที่แยกเอา หน้าตา (presentation) ออกมาจาก เนื้อหา (content) ไม่ให้ปะปนกัน โดยส่วนของหน้าตาจะนำไปใส่ใน Cascading Style Sheets (CSS) ส่วนเนื้อหาก็จะอยู่ในเซตย่อยของ HTML ที่ไม่ใช้แท็กที่เกี่ยวข้องกับหน้าตาเช่น center, b, i (โดยถ้าอยากเน้นข้อความไหน ก็ให้ใช้ strong และ em แทน)

นอกจากการแยกหน้าตากับเนื้อหาออกจากกันแล้ว ก็ยังมีความพยายามที่จะเขียนโค้ด HTML ที่มีโครงสร้างเป็นระบบขึ้น โดยอาศัยแท็กจำพวก h1, div และ li เป็นต้น และพยายามใส่ความหมายเข้าไปในโค้ด โดยอาศัยแอตทริบิวต์จำพวก class, rel และ id โดยกลุ่มนี้จะเรียกรวม ๆ ว่า Semantic HTML โดยมีแนวคิดหลักอย่างน้อยสองแบบคือ POSH และ Microformats ซึ่งทั้งสองอย่างนี้สามารถใช้ร่วมกันได้ โดยอย่างแรกจะเป็นคำแนะนำกว้าง ๆ สำหรับหน้าเว็บทั้งหมด ส่วนอย่างหลังจะเป็นข้อกำหนดที่ชัดเจนสำหรับข้อมูลแต่ละประเภทไปเลย — กล่าวโดยรวมคือ ทั้งหมดนี้เป็นการประยุกต์ใช้ HTML รุ่นปัจจุบันที่มีอยู่ ให้บันทึกความหมายบางอย่างได้

HTML 5 จะช่วยให้รูปแบบการเขียนโค้ดลักษณะ POSH เป็นไปด้วยความสะดวกมากขึ้น เขียนได้ตรง ๆ ขึ้น (ลองดูตัวอย่างจาก A Preview of HTML 5)

ร่างข้อกำหนดของ HTML 5 เริ่มพัฒนามาตั้งแต่ พ.ศ. 2547 และปัจจุบันยังอยู่ในระหว่างการพัฒนาโดยคณะทำงานสองกลุ่มคือ W3C HTML WG และ WHATWG ร่วมมือกัน — โดยคาดว่าจะสามารถประกาศเป็น W3C Recommendation ได้ประมาณปี พ.ศ. 2565 (อีกประมาณ 15 ปี! – ดู FAQ)
อย่างไรก็ตาม ความสามารถของ HTML 5 จะค่อย ๆ ถูกนำไปใช้ในเว็บเบราว์เซอร์และเว็บไซต์ต่าง ๆ ทีละน้อย ๆ ตัวอย่างเช่นเว็บเบราว์เซอร์จำนวนหนึ่งในปัจจุบันก็รองรับแท็ก canvas หรือความสามารถด้าน autodiscovery แล้ว

ถ้าสนใจเรื่อง Semantic HTML (ซึ่งคุณสามารถนำแนวคิดนี้ไปใช้ได้ตั้งแต่ตอนนี้เลย ไม่ต้องมาตรฐานใหม่ ไม่ต้องรอเบราว์เซอร์ใหม่) ลองไปดูที่เว็บไซต์ semantichtml.org หรือค้นเว็บด้วยว่า “semantic html” ดู จะพบเว็บไซต์มากมาย ที่แนะนำและพูดคุยเกี่ยวกับเรื่องนี้

ผลพลอยได้อย่างหนึ่ง ที่น่าจะได้จากการเขียนหน้าเว็บตามแนว Semantic HTML ก็คือ โปรแกรมอ่านหน้าจอ (screen reader) สำหรับผู้พิการทางสายตา น่าจะทำงานได้ดียิ่งขึ้น เพราะมีข้อมูลมาช่วยตัดสินใจมากขึ้นในการอ่าน (คิดง่าย ๆ ว่า Semantic HTML เน้นว่าเนื้อหาหมายความว่าอะไร ไม่ใช่ว่าเนื้อหาจะถูกวาดยังไง การ‘อ่าน’โดยตรงจากเนื้อหาจริง ๆ ย่อมง่ายและถูกต้องกว่าการอ่าน+ตีความจากภาพวาดอยู่แล้ว)

[ ลิงก์ A List Apart | ผ่าน OSNews.com ]

technorati tags:
,