BACK TO TOP

Smooth font with Notepad++

posted on 13 Nov 2011 04:53 by nodtem32  in Programming

สืบเนื่องจากบทความ Smooth Font; AntiAlias จึงเกิดความคิดที่จะนำ GDI++ มาใส่ Notepad++ ในรูปแบบ Plugin และวันนี้ก็ทำเสร็จเรียบร้อย

NppGDIpp

Smooth edges for screen font in Notepad++
GDI++/FreeType2 (c) 2006-2011 drwatson http://www18.atwiki.jp/gdiplus2/
Released under FreeType license

Requirement

  • Window XP newer x86

Download

Source code

https://github.com/nodtem66/NppGDIpp

Tags: font, monaco, notepad, styler, textmate0 Comments

Smooth Font; AntiAlias

posted on 09 Nov 2011 21:24 by nodtem32  in Programming

หลังจากเราทำ Notepad++ ให้ใ้กล้เคียงกับ Textmate เราก็จะเห็นว่า ClearType ของ Window ทำให้ font ดูสบายตาขึ้นโดยภาพรวม แต่ก็ไม่สวยเท่า Quartz ของ Apple อยู่ดี

วันนี้ผมมาเสนออีกวิธีนั่นคือการใช้ GDI++ ซึ่งนักพัฒนาชาวญี่ปุ่นเขียนขึ้นมาเมื่อปี 2006

วิธีการ

  1. Download GDI++
  2. รัน gdippManager.exe

Customize

อ่าน option ได้จาก http://free.flop.jp/gdi++/src/gdi0808.txt
โดยส่วนตัว ต้องการแค่ render font เฉพาะแค่โปรแกรม notepad++.exe และอยากให้ font ตัวบางลง
จึงเขียน 3.ini ลงใน ./ini/ ดังนี้ 

[General]
Name=Smart
Icon=..\gditrayicon.icl,3

HookChildProcesses=0
HintingMode=1
AntiAliasMode=4
MaxHeight=150
FontLoader=0
FontSubstitutes=2
GammaMode=0
GammaValue=1.1
RenderWeight=1.1
Contrast=1.1
TextTuning=0
TextTuningR=-1
TextTuningG=-1
TextTuningB=-1
NormalWeight=2
BoldWeight=4
ItalicSlant=4
LcdFilter=2
LoadOnDemand=1
CacheMaxFaces=16
CacheMaxSizes=16
CacheMaxBytes=4194304
UseInclude=1

[IncludeModule]
notepad++.exe
สิ่งที่ทำคือตั้งค่า NormalWeight, BoldWeight, ItalicSlant, RenderWeight เพิ่ม UseInclude=1 และ IncludeModule ลงไป

การเปลี่ยนแปลง

จากข้างบน ภาพ 1 คือก่อน ClearType ภาพ 2 คือหลัง ClearType ภาพ 3 คือหลัง ClearType + GDI++

Tags: antialias, font, gdi, smooth font1 Comments

13 Coins Problem

posted on 30 Oct 2011 15:44 by nodtem32  in General

ปัญหานี้ได้มาจาก Facebook ของพี่คนหนึ่งครับ

สิ่งที่ต้องระวังคือ เราไม่ทราบว่า เหรียญที่น้ำหนักแตกต่างนั้น เบาหรือหนัก กว่าเหรียญอื่นๆ

รับประกันว่ามีคำตอบ
พักกับเรื่องน้ำท่วม มาลองเขย่าสมองเล่นดูครับ

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

Tags: 13coins, 13เหรียญ0 Comments

เปลี่ยน Font บนเว็บ

posted on 23 Oct 2011 19:42 by nodtem32  in Exteen

วิธีแรก

ใช้ Google Web Font ตามบทความ ใช้ font สวยๆ บนเว็บได้ง่ายๆ ด้วย Google web fonts
ข้อดี: เร็ว มีคุณภาพ ถูกกฎหมาย
ข้อเสีย: ไม่มี font ภาษาไทย

วิธีที่สอง

Download font ที่ต้องการแล้วนำไปสร้างเป็น font บนเว็บผ่านเว็บไซต์เช่น

ข้อดี: เร็ว สะดวก
ข้อเสีย: บางอันติดตั้งยาก สำหรับ FontSquirrel เวลา convert เหมือนจะเอาเฉพาะ latin script ดังนั้นภาษาไืทยหายครับ

วิธีที่สาม

DIY ครับ
โดย...
แปลงจาก ttf เป็น eof เพื่อใช้ใน IE ใช้โปรแกรม eotfast หรือ ttf2eot
แปลงเป็น woff เพื่อใช้ใน Browser สมัยใหม่ ใช้ sfnt2woff
แปลงเป็น svg เพื่อในใช้ Browser บน smart phone ใช้ Batik
หมายเหตุ: อาจจะเลือกแปลงไปเป็นบางตัวเฉพาะที่อยากใช้ browser แสดงผล
จากนั้น upload font ไปยัง host ของเราจากนั้นใช้ css ดังนี้ 

@font-face {
    font-family: 'ชื่อ font';
    src: url('url ไปยังไฟล์.eot');
    src: url('url ไปยังไฟล์.eot?#iefix') format('embedded-opentype'),
         url('url ไปยังไฟล์.woff') format('woff'),
         url('url ไปยังไฟล์.ttf') format('truetype'),
         url('url ไปยังไฟล์.svg#ชื่อ font') format('svg');
    font-weight: normal;
    font-style: normal;
}
ข้อดี: ใช้ภาษาไทยได้
ข้อเสีย: เสียเวลา ติดตั้งยาก ช้า บางครั้งอาจโดนเรื่องลิขสิทธิ์

Tags: css, face, font0 Comments

wall0

posted on 18 Oct 2011 15:37 by nodtem32  in Exteen, Javascript, Programming
update 9 พ.ย. 2554

เป็น opensource project ต่อจาก Jerboa

Jerboa จะพัฒนาทั้ง layout และ text editor ไปด้วย
ในขณะที่ wall0 จะพัฒนาแค่ช่วย layout เท่านั้นแล้วนำไป bridge เข้ากับ text editor ตัวอื่นๆ
text editor ที่ตอนนี้คิดไว้คือ aloha editorครับ

เมื่อพัฒนาเสร็จจะเอามาลองที่ exteen นะครับ

Contributors

ถ้าคุณคือ

  • Web designer
  • Front-end programmer
  • Tester
  • และ ถ้าคุณมี idea เจ๋งๆที่จะเปลี่ยนโลกของ editor ที่ใช้ในการเขียน blog
ร่วมเป็นส่วนหนึ่งของ project นี้ได้

ผู้ใดอยากเข้าร่วม ติดต่อ @nodtem66 ครับโดยรายชื่อนักพัฒนาจะขึ้นที่ตรง Contributors นะครับ

ความคืบหน้า

    8/11/2011
  • remove require.js
  • add ApacheAnt build.xml script
  • add pure python build.py script for alternative build file
  • add drag, resize, and Aloha compatible
    • 29/10/2011
  • add new algorithm to render html text
    • 27/10/2011
  • add contributors section from Github API
    • 26/10/2011
  • add History Class
  • add new Lib (getPropStyle, getPageX, getPageY, getParentX, getParentY)
    • 24/10/2011
  • Start Wall0 with require.js !!!
    • 22/10/2011
  • UnitTest Lib with IE6,7,8 Firefox, and GoogleChrome passed

Tags: editor, wall0, wysiwyg2 Comments

CSS: Background

posted on 10 Oct 2011 00:56 by nodtem32  in CSS, Exteen

ควรศึกษา CSS ฉบับยืนอ่าน มาก่อน

สำหรับเรื่อง background นั้นเป็น property ที่สำคัญมีอยู่ 4 อันนั่นคือ

  1. สีพื้นหลัง**
  2. ภาพพื้นหลัง**
  3. ตำแหน่งภาพพื้นหลัง
  4. Pattern ภาพพื้นหลัง**

โดยทั้งหมดนั้นสามารถเขียนได้แบบประจักษ์แจ้ง(explicit) หรือแบบโดยนัย(implicit) พูดง่ายๆคือแบบเต็มหรือแบบย่อนั่นเอง

การเขียนแบบย่อ** **property ที่ควรรู้

1. สีพื้นหลัง

โครงสร้างคำสั่ง

background-color: สี หรือ #RGB;
ตัวอย่าง
background-color: red; //สีพื้นหลังสีแดง
background-color: #0cf; //สีพื้นหลังสี #00ccff

2. ภาพพื้นหลัง

โครงสร้างคำสั่ง

background-image: url(ที่อยู่ของรูปภาพพื้นหลัง);
ตัวอย่าง
background-image: url(http://g.exteen.com/i/m/icon_filetype.gif); //ภาพพื้นหลัง

3. ตำแหน่งภาพพื้นหลัง

โครงสร้างคำสั่ง

background-position: ตำแหน่งX ตำแหน่งY;
ตัวอย่าง เช่นมีรูปข้างล่าง
background-position: 0 0; //รูป background เริ่มจากพิกัด(0,0)
background-position: 0 -32px; //รูป background เริ่มจากพิกัด(0,-32)
background-position: 0 -64px; //รูป background เริ่มจากพิกัด(0,-64)

4. Pattern ภาพพื้นหลัง

โครงสร้างคำสั่ง

background-repeat: value;
ตัวอย่าง
background-repeat: no-repeat; //รูป background ไม่ซ้ำ
background-repeat: repeat-x; //รูป background ซ้ำตามแกน x
background-repeat: repeat-y; //รูป background 
ซ้ำตาม
แนวแกน y

การเขียนอย่างย่อ

โครงสร้างคำสั่ง

background: สี url(รูปภาพ) Pattern ตำแหน่งx ตำแหน่งy ;
ตัวอย่าง
background: red url(http://www.w3schools.com/cssref/smiley.gif) no-repeat top center;


     //ภาพ

 

สำหรับ css3 นั้นมีอะไรใหม่ๆ เจ๋งๆ เยอะมาก ลองค้นหาดูนะ
Tags: background, css, exteen, theme0 Comments

CSS: Font

posted on 09 Oct 2011 22:43 by nodtem32  in CSS, Exteen

ในบทความนี้ขอพูดเฉพาะพื้นฐานเกี่ยวกับอักษรของ css
และควรศึกษา CSS ฉบับยืนอ่าน มาก่อน

สารบัญ

  1. ปรับขนาดอักษร**
  2. เปลี่ยนสีอักษร**
  3. เปลี่ยนลักษณะอักษร**
  4. เปลี่ยนความหนาอักษร
  5. เปลี่ยนความสูงบรรทัด
  6. เปลี่ยนระยะห่างตัวอักษร
  7. เปลี่ยนระยะห่างคำ
  8. ระยะย่อหน้า
**property ที่ควรรู้

1. การปรับขนาดอักษร

โครงสร้างคำสั่ง 

font-size: ขนาด;
ตัวอย่าง 
font-size: 16px; //ขนาด 16 pixel
font-size: 23px; //ขนาด 23 pixel

2. การเปลี่ยนสีอักษร

โครงสร้างคำสั่ง 

color: สี หรือ #RGB;
ตัวอย่าง 
color: blue; //ให้สีเหมือน #0000ff
color: #c03dfe; //สี #c03dfe
color: #0cf; //ให้ผลเหมือน #00ccff

3. เปลี่ยนลักษณะอักษร

โครงสร้างคำสั่ง 

text-decoration: value;
ตัวอย่าง 
text-decoration: underline; //ขีดเส้นใต้
text-decoration: overline; //ขีดเส้นบน
text-decoration: line-through; //ขีดฆ่า
text-decoration: none; //ไม่ขีด

4. เปลี่ยนความหนาอักษร

โครงสร้างคำสั่ง 

font-weight: value;
ตัวอย่าง 
font-weight: bold; //ตัวหนา
font-weight: normal; //ตัวธรรมดา

5. เปลี่ยนความสูงบรรทัด

โครงสร้างคำสั่ง 

line-height: ขนาด;
ตัวอย่าง 
line-height: 10px; //ความสูงบรรทัด 10px
line-height: 150%; //ความสูงบรรทัด 150%

6. เปลี่ยนระยะห่างตัวอักษร

โครงสร้างคำสั่ง 

letter-spacing: ขนาด;
ตัวอย่าง 
letter-spacing: 10px; //ระยะห่างอักษร 10px
letter-spacing: 0.5em; //ระยะห่างอักษร 0.5em

7. เปลี่ยนระยะห่างคำ

โครงสร้างคำสั่ง 

word-spacing: ขนาด;
ตัวอย่าง 
word-spacing: 8px; //ระยะห่างระหว่างคำ 8px
word-spacing: 13pt; //ระยะห่างระหว่างคำ 8pt

8. ระยะย่อหน้า

โครงสร้างคำสั่ง 

text-indent: ขนาด;
ตัวอย่าง 
text-indent: 13px; //ย่อหน้า 13px
text-indent: 1em;  //ย่อหน้า 1em

**หมายเหตุ และยังไม่รวม css3 อีกมากมาย
Tags: css, font, theme0 Comments
Previous | Next