Nhận Diện Ngôn Ngữ Bằng CSS
Saturday, 5. September 2009, 16:57:21
Một số website đa quốc gia như Google hay Yahoo có sẵn một cơ chế rất hay là nhận diện IP của người truy cập để hiển thị các trang có ngôn ngữ và giao diện phù hợp. Điều này có lẽ không mới mẻ hay đặc biệt gì. Tuy nhiên nó tạo cho người dùng cảm giác thân thiện và dễ sử dụng hơn. Là một kinh nghiệm tốt mà các website lớn nên học tập. Nói tới đây thì ý Pearl là WPB cũng là blog bự nên Pearl cần học tập Google 1 chút. Vậy phải làm sao đây?Trong HTML có một thuộc tính gọi là lang. Thuộc tính này đóng vai trò chú thích về ngôn ngữ của một trang hay một phần trang web. Nó không ảnh hưởng đến nội dung trang web mà chỉ đóng vai trò hỗ trợ cho các search engine và trình duyệt trong việc phân loại ngôn ngữ tìm kiếm và hiển thị trang web chính xác hơn. Mặc dù không ảnh hưởng đến nội dung trang web. Tuy nhiên người viết CSS lại nảy sinh một nhu cầu là tạo style riêng cho những (phần) trang web được đánh dấu là viết ở một ngôn ngữ nào đó. Đó là lý do mà CSS có thêm 1 pseudo-class gọi là :lang. (Nói nhiêu đó đủ hiểu rồi ha. Lâu rồi Pearl không viết tuts nên thấy không hấp dẫn lắm mặc dù trong đầu ý kiến tràn trề).
Cho một ví dụ chơi nhá. Giả sử bạn có 2 paragraph như thế này
<p lang="vn">WallPearl rất rất là đẹp dzai</p> (ví dụ thôi nhá) <p lang="en">WallPearl 's very handsome</p> (example only)
Bạn muốn câu tiếng Việt nó đỏ, câu tiếng Anh nó xanh + thêm cái khung cũng màu chữ thì bạn sẽ viết CSS như vầy.
p:lang(vn){color:red;border:1px solid red}
p:lang(en){color:blue;border:1px solid blue}
Ây có vẻ đơn giản và nói nhỏ nhiều bạn sẽ khoái xài id hơn vì nó ít hơn 2 ký tự ấy nhỉ. Nhưng bù lại lang có giá trị ghi chú ngôn ngữ hơn.
Ở trên là ví dụ đại trà. Bi h Pearl quay lại vụ cái blog. Lâu rồi không làm skin mới (dù vẫn còn rất ham hố nhưng hơi lười + bận). Từ khi MYO đưa ra mấy cái giao diện ngôn ngữ thì bạn đã tính chuyện quậy rồi nhưng mãi bi h mới làm. Cái ý tưởng là bạn sẽ cho thay background blog và 1 số thành phần + thêm câu chào tương ứng với từng giao diện ngôn ngữ. Khi người Nhật ghé sẽ thấy cái background có phong cách Nhật + câu chào bằng tiếng Nhật thì chắc sẽ có cảm tình hơn với chủ nhà mặc dù chủ nhà mù Nihongo. Ấy ý tưởng là thế, bắt tay cái nào. Trước tiên ta sẽ xem cái code language của MYO. MYO có tổng cộng 18 cái giao diện ngôn ngữ với các ký hiệu tương ứng là bg cho BúnGàRi, cs cho Séc, da cho Đan Mạch, en cho cái mà ai cũng biết, es cho Tây Bán Nhà, fi cho Phần Lan, fy cho Hà Lan, hu cho Hungari, it cho Ý, ja cho Nhật, no cho Na Uy, pl cho Ba Lan, ru cho Nga, tr cho Thổ, uk cho Ukraina, vn cho Việt Nam, xx-lol cho con mèo, zh-cn cho Trung Quốc.
Bi h bạn muốn đổi cái background thành hình núi Phú Sĩ khi người dùng bật qua giao diện tiếng Nhật nhá
body:lang(ja){background:url(Fuji.jpg) no-repeat}
Bạn cũng muốn viết cái câu chào bằng tiếng Nhật nữa. Viết ở đâu bi h bạn viết đại ở dưới avatar luôn còn ai thích viết đâu tùy.
#myphoto:lang(ja):after{content:"ブログ WallPearl にようこそ!"}
(câu CSS này có nghĩa là đăt câu ... phía sau thành phần myphoto khi ngôn ngữ trang web là tiếng Nhật đó)
Tương tự, rãnh quá bạn viết nốt lời cảm ơn người ta comment luôn
#newcomment h3:lang(ja):after{content:"ありがとうございました！"}
Đó chỉ có nhiêu đó thôi là cái blog sẽ có phong cách tắc kè hoa liền. Vì bi h đang là mùa thu nên bạn làm luôn style mùa thu cho tất cả. Vì lý do kỹ thuật nên bạn vẫn chưa tìm được hết các hình ảnh đặc trưng cho mỗi ngôn ngữ nên tạm thời làm đại làm lẹ để đem khoe thôi. Trong đó có sử dụng hình ảnh của skin Y!360, Hi!Baidu, Deviantart và search từ Google quên rồi. Nhân đây xin cảm ơn mấy chỗ đó luôn. Có gì mai mốt Pearl mượn tiếp.
Bây giờ, mọi người thử vào blog Pearl rồi chọn giao diện ngôn ngữ khác và quan sát background, cái phần dưới photo trên sitebar với chỗ comment xem có gì khác hông nhá. À quên cái anh IE vẫn chưa được bác Steve Ballmer cho học xóa mù nên nó hem hiểu mô tê gì vụ này hết nên ai xài IE để vi vu blog Pearl thì sẽ được thấy cái màu xanh u như kỉ.
--------------------------------------------------------
Viết xong ý chính rồi tranh thủ bán tiếp than. Tình hình là 9/8 bạn phấn khởi comeback xong hôm sau bạn đã có thể ăn cơm nhưng cái máy tính nó phân bì nên bạn cho nó đi ăn cháo bù. Công nhận tháng xui, năm hạn có khác. Ủ qua tháng 9 mới chữa cho nó luôn. Tính 9/9 comeback tiếp vào ngày đẹp nhưng comeback hoài thấy dễ ăn dép quá nên thôi 5/9 bon chen khai blog lại luôn. Hi vọng đợt này làm ăn ngon lành tí. Sẵn cảm ơn mọi người đã quan tâm, ủng hộ, spam WPB trong những ngày qua. Xin chân thành cảm ơn!
), mà Pearl lại cũng không rành các ngôn ngữ mà em nó hiểu nên sau tuần đầu làm việc với em nó thì Pearl đã hết chữ để dạy 
. Mặc dù cũng rất lưu luyến em nó nhưng Pearl vẫn đành phải chia tay với em nó 
. Đó là việc hồi cuối tháng 3 năm ngoái. Bẵng đi hơn năm Pearl cũng đã quên chuyện này. Nhưng mới vừa rồi Pearl lại gặp lại em nó. Nghe kể gần đây em nó đã làm quen được nhiều người bạn Việt Nam. Em nó bảo cũng nhờ Pearl mà em nó đã có thể giao tiếp tốt hơn với các bạn mới 
. Nhưng mà em nó vẫn tiếc vì em nó học hành dang dở nên đôi khi những người bạn Việt Nam vẫn không hiểu em nó đang muốn nói gì 
. Vốn dĩ Pearl cũng luôn canh cánh vì vẫn chưa dạy cho em nó đến nơi đến chốn. Nên sau cùng 2 thầy trò lại sục sạo từ điển xem được thêm chữ nào thì đỡ chữ đó. Chấp chấp, vá vá cả mấy ngày cuối cùng Pearl cũng đã miễn cưỡng phổ cập xong những mảng kiến thức còn thiếu cho em nó. 
). Tuy nhiên, nếu ai có cao kiến gì trong việc nâng cao chất lượng giáo trình thì có thể liên hệ với Pearl.
WIDGETIZE