<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>내 맘대로 보는 세상 &#187; fontconfig</title>
	<atom:link href="http://b.mytears.org/tag/fontconfig/feed" rel="self" type="application/rss+xml" />
	<link>http://b.mytears.org</link>
	<description>평범한 일상 속의 보석찾기..</description>
	<lastBuildDate>Sun, 07 Feb 2010 03:01:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Cairo test…</title>
		<link>http://b.mytears.org/2009/01/1211</link>
		<comments>http://b.mytears.org/2009/01/1211#comments</comments>
		<pubDate>Fri, 23 Jan 2009 17:13:30 +0000</pubDate>
		<dc:creator>정태영</dc:creator>
				<category><![CDATA[Tae-young]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[cairo]]></category>
		<category><![CDATA[Computer]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[fontconfig]]></category>
		<category><![CDATA[freetype]]></category>
		<category><![CDATA[gd]]></category>
		<category><![CDATA[graphic]]></category>
		<category><![CDATA[OpenSource]]></category>

		<guid isPermaLink="false">http://b.mytears.org/?p=1211</guid>
		<description><![CDATA[<p>서체 관련된 샘플 페이지를 만들면서 손에 익숙한 gd를 활용해왔는데, gd의 fontconfig 지원이 미약하다보니 아쉬운 점들이 눈에 보이기 시작했습니다. </p>
<p>가장 큰 예로 굴림체, 바탕체, 나눔고딕_코딩 글꼴 같은 고정폭(정확하게는 dual-width) 서체의 영문/한글 너비가 동일하게 보여지는 문제는 fontconfig의 global advance옵션을 통해 해결할 수 있지만, gd에서는 fontconfig의 옵션을 제대로 활용하지 않고 있기 때문에 이 문제를 해결할 수가 없었습니다.</p>
<p>그런 이유로 ...</p>
<p><a href='http://b.mytears.org/2009/01/1211'>Read the rest of this entry...</a></p>
<p><h3 style="clear:both;">Related Posts</h3><ul class="related_post"><li>8/1/2008 -- <a href="http://b.mytears.org/2008/08/661" title="한글 서체들 샘플을 만들어봤습니다.">한글 서체들 샘플을 만들어봤습니다. (3)</a></li><li>1/23/2009 -- <a href="http://b.mytears.org/2009/01/1181" title="공개 서체: 네이버 나눔고딕_코딩">공개 서체: 네이버 나눔고딕_코딩 (0)</a></li><li>9/19/2006 -- <a href="http://b.mytears.org/2006/09/415" title="내가 참여했던 오픈소스">내가 참여했던 오픈소스 (1)</a></li><li>1/29/2009 -- <a href="http://b.mytears.org/2009/01/1236" title="wp-codebox, wp-openid 버그 패치">wp-codebox, wp-openid 버그 패치 (4)</a></li><li>1/23/2009 -- <a href="http://b.mytears.org/2009/01/1192" title="Punbb update">Punbb update (0)</a></li></ul></p><div style="width: 180px; margin-left: auto; margin-right: auto; margin-bottom: 30px; margin-top: 30px; ">
    <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='73' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
    <param name='allowScriptAccess' value='always'/>
    <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=52225&guid=http%3A%2F%2Fb.mytears.org%2F%3Fp%3D1211&rdate=2009-01-24+02%3A13%3A30&rawhtml=&skin=1&showhitcnt=1&platform=5'/>
    <param name='quality' value='high'/>
    <param name='wmode' value='window'/>
    <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=52225&guid=http%3A%2F%2Fb.mytears.org%2F%3Fp%3D1211&rdate=2009-01-24+02%3A13%3A30&rawhtml=&skin=1&showhitcnt=1&platform=5' quality='high' wmode='window' width='73' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
    </object>
		</div>]]></description>
			<content:encoded><![CDATA[<p>서체 관련된 샘플 페이지를 만들면서 손에 익숙한 <a href='http://libgd.org'>gd</a>를 활용해왔는데, gd의 fontconfig 지원이 미약하다보니 아쉬운 점들이 눈에 보이기 시작했습니다. </p>
<p>가장 큰 예로 굴림체, 바탕체, 나눔고딕_코딩 글꼴 같은 고정폭(정확하게는 dual-width) 서체의 영문/한글 너비가 동일하게 보여지는 문제는 <a href='http://fontconfig.org'>fontconfig</a>의 global advance옵션을 통해 해결할 수 있지만, gd에서는 fontconfig의 옵션을 제대로 활용하지 않고 있기 때문에 이 문제를 해결할 수가 없었습니다.</p>
<p>그런 이유로 fontconfig를 제대로 활용하는 그래픽 API를 찾던 도중 <a href='http://cairographics.org'>Cairo</a>가 생각났습니다. Cairo는 <a href='http://freedesktop.org'>fdo</a>에서 개발한 그래픽 API로 현재 모질라, Gnome 등에서 활발하게 사용되고 있는데, 의외로 X 없이도 설치가 가능하고, API도 아주 단순해서 제가 활용하려던 용도로 딱이더군요.</p>
<p><span id="more-1211"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code2'); return false;">View Code</a> C</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p12112"><td class="code" id="p1211code2"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">char</span> <span style="color: #339933;">*</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span>
	<span style="color: #ff0000;">&quot;다람쥐 쳇바퀴 돌아 아햏햏 똠방각하&quot;</span><span style="color: #339933;">,</span>
	<span style="color: #ff0000;">&quot;abcdefghijklmnopqrstuvwxyz&quot;</span><span style="color: #339933;">,</span>
	<span style="color: #ff0000;">&quot;ABCDEFGHIJKLMNOPQRSTUVWXYZ&quot;</span><span style="color: #339933;">,</span>
	<span style="color: #ff0000;">&quot;1234567890!@#$%^&amp;*()&quot;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
cairo_surface_t <span style="color: #339933;">*</span>surface<span style="color: #339933;">;</span>cairo_t <span style="color: #339933;">*</span>cr<span style="color: #339933;">;</span>
<span style="color: #993333;">int</span> i<span style="color: #339933;">;</span>  
<span style="color: #993333;">double</span> pos<span style="color: #339933;">;</span>
cairo_font_extents_t fe<span style="color: #339933;">;</span>cairo_text_extents_t te<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* Prepare drawing area */</span>
surface <span style="color: #339933;">=</span> cairo_image_surface_create <span style="color: #009900;">&#40;</span>CAIRO_FORMAT_ARGB32<span style="color: #339933;">,</span> <span style="color: #0000dd;">500</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">500</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>cr <span style="color: #339933;">=</span> cairo_create <span style="color: #009900;">&#40;</span>surface<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
cairo_set_font_size <span style="color: #009900;">&#40;</span>cr<span style="color: #339933;">,</span> size<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
cairo_set_source_rgb <span style="color: #009900;">&#40;</span>cr<span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
cairo_select_font_face <span style="color: #009900;">&#40;</span>cr<span style="color: #339933;">,</span> font<span style="color: #339933;">,</span>
        CAIRO_FONT_SLANT_NORMAL<span style="color: #339933;">,</span> CAIRO_FONT_WEIGHT_NORMAL<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
cairo_font_extents <span style="color: #009900;">&#40;</span>cr<span style="color: #339933;">,</span> <span style="color: #339933;">&amp;</span>fe<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
pos <span style="color: #339933;">=</span> <span style="color:#800080;">3.0</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">for</span><span style="color: #009900;">&#40;</span> i <span style="color: #339933;">=</span> <span style="color: #0000dd;">0</span> <span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> <span style="color: #0000dd;">4</span> <span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    cairo_text_extents <span style="color: #009900;">&#40;</span>cr<span style="color: #339933;">,</span> text<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #339933;">&amp;</span>te<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    pos <span style="color: #339933;">+=</span> te.<span style="color: #202020;">height</span> <span style="color: #339933;">+</span> <span style="color:#800080;">3.0</span><span style="color: #339933;">;</span>
&nbsp;
    cairo_move_to <span style="color: #009900;">&#40;</span>cr<span style="color: #339933;">,</span> <span style="color:#800080;">3.0</span><span style="color: #339933;">,</span> pos<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    cairo_show_text <span style="color: #009900;">&#40;</span>cr<span style="color: #339933;">,</span> text<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
cairo_surface_write_to_png<span style="color: #009900;">&#40;</span>surface<span style="color: #339933;">,</span> out <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
cairo_destroy <span style="color: #009900;">&#40;</span>cr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
cairo_surface_destroy <span style="color: #009900;">&#40;</span>surface<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>위 코드 정도만으로도 서체를 렌더링하고, 그 결과를 png로 저장할 수 있습니다. (surface를 resize하는 기능이 없기 때문에 저대로보단, 약간의 꼼수를 부려야할 것 같습니다.)</p>
<p>freetype의 경우 초기화에만 저 정도 코드가 필요하다는 것을 생각하면 -_-a 아주 편리하다고 할 수 있겠습니다.</p>
<p>언제 짬을 내서 서체 샘플을 새롭게 빌드해야겠네요. 카이로 만세!!!</p>
<p>테스트 코드나 결과물은 아래서&#8230;</p>
<p><a href='http://mytears.org/tmp/dir/?path=./cairo&#038;N'>http://mytears.org/tmp/dir/?path=./cairo&#038;N</a></p>
</pre><div style="width: 180px; margin-left: auto; margin-right: auto; margin-bottom: 30px; margin-top: 30px; ">
    <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='73' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
    <param name='allowScriptAccess' value='always'/>
    <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=52225&guid=http%3A%2F%2Fb.mytears.org%2F%3Fp%3D1211&rdate=2009-01-24+02%3A13%3A30&rawhtml=&skin=1&showhitcnt=1&platform=5'/>
    <param name='quality' value='high'/>
    <param name='wmode' value='window'/>
    <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=52225&guid=http%3A%2F%2Fb.mytears.org%2F%3Fp%3D1211&rdate=2009-01-24+02%3A13%3A30&rawhtml=&skin=1&showhitcnt=1&platform=5' quality='high' wmode='window' width='73' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
    </object>
		</div><h3 style="clear:both;">Related Posts</h3><ul class="related_post"><li>8/1/2008 -- <a href="http://b.mytears.org/2008/08/661" title="한글 서체들 샘플을 만들어봤습니다.">한글 서체들 샘플을 만들어봤습니다. (3)</a></li><li>1/23/2009 -- <a href="http://b.mytears.org/2009/01/1181" title="공개 서체: 네이버 나눔고딕_코딩">공개 서체: 네이버 나눔고딕_코딩 (0)</a></li><li>9/19/2006 -- <a href="http://b.mytears.org/2006/09/415" title="내가 참여했던 오픈소스">내가 참여했던 오픈소스 (1)</a></li><li>1/29/2009 -- <a href="http://b.mytears.org/2009/01/1236" title="wp-codebox, wp-openid 버그 패치">wp-codebox, wp-openid 버그 패치 (4)</a></li><li>1/23/2009 -- <a href="http://b.mytears.org/2009/01/1192" title="Punbb update">Punbb update (0)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://b.mytears.org/2009/01/1211/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
