136 lines
10 KiB
HTML
136 lines
10 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
|
||
<head>
|
||
<!--
|
||
*
|
||
* Copyright 2008-2012, Haiku. All rights reserved.
|
||
* Distributed under the terms of the MIT License.
|
||
*
|
||
* Authors:
|
||
* Humdinger <humdingerb@gmail.com>
|
||
*
|
||
-->
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||
<meta http-equiv="Content-Style-Type" content="text/css" />
|
||
<meta name="robots" content="all" />
|
||
<title>Appearance</title>
|
||
<link rel="stylesheet" type="text/css" href="../../Haiku-doc.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<div id="banner">
|
||
<div><span>User guide</span></div>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<div class="inner">
|
||
<ul class="lang-menu">
|
||
<li class="now"><img src="../../images/flags/gb.png" alt="" /> English</li>
|
||
<li><a href="../../fr/preferences/appearance.html"><img src="../../images/flags/fr.png" alt="" />Français</a></li>
|
||
<li><a href="../../de/preferences/appearance.html"><img src="../../images/flags/de.png" alt="" />Deutsch</a></li>
|
||
<li><a href="../../it/preferences/appearance.html"><img src="../../images/flags/it.png" alt="" />Italiano</a></li>
|
||
<li><a href="../../ru/preferences/appearance.html"><img src="../../images/flags/ru.png" alt="" />Русский</a></li>
|
||
<li><a href="../../es/preferences/appearance.html"><img src="../../images/flags/es.png" alt="" />Español</a></li>
|
||
<li><a href="../../sv_SE/preferences/appearance.html"><img src="../../images/flags/sv_SE.png" alt="" />Svenska</a></li>
|
||
<li><a href="../../jp/preferences/appearance.html"><img src="../../images/flags/jp.png" alt="" />日本語</a></li>
|
||
<li><a href="../../uk/preferences/appearance.html"><img src="../../images/flags/uk.png" alt="" />Українська</a></li>
|
||
<li><a href="../../zh_CN/preferences/appearance.html"><img src="../../images/flags/zh_CN.png" alt="" /> 中文 ［中文］</a></li>
|
||
<li><a href="../../pt_PT/preferences/appearance.html"><img src="../../images/flags/pt_PT.png" alt="" />Português</a></li>
|
||
<li><a href="../../fi/preferences/appearance.html"><img src="../../images/flags/fi.png" alt="" />Suomi</a></li>
|
||
<li><a href="../../sk/preferences/appearance.html"><img src="../../images/flags/sk.png" alt="" />Slovenčina</a></li>
|
||
</ul>
|
||
<span>
|
||
<a href="../preferences.html" class="uplink">Preferences</a>
|
||
:: <a href="backgrounds.html">Backgrounds</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
<div id="content">
|
||
<div>
|
||
|
||
<h2><img src="../../images/prefs-images/appearance-icon_64.png" alt="appearance-icon_64.png" width="64" height="64" />Appearance</h2>
|
||
<table summary="quickinfo" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td>Deskbar:</td><td style="width:15px;"></td><td><span class="menu">Preferences</span></td></tr>
|
||
<tr><td>Location:</td><td></td><td><span class="path">/boot/system/preferences/Appearance</span></td></tr>
|
||
<tr><td>Settings:</td><td></td><td><span class="path">~/config/settings/system/app_server/appearance</span><br />
|
||
<span class="path">~/config/settings/system/app_server/decorator_settings</span><br />
|
||
<span class="path">~/config/settings/system/app_server/fonts</span></td></tr>
|
||
</table>
|
||
<p>The Appearance preferences lets you change some aspects of Haiku's visuals.</p>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="fonts" name="fonts">Fonts</a></h2>
|
||
<img src="../images/prefs-images/appearance-fonts.png" alt="appearance-fonts.png" />
|
||
<p>Haiku defines three standard fonts for different purposes. You set plain, bold and fixed font types and sizes that will be used throughout the system. Besides these, there's also a separate setting for the font used in menus.</p>
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="installing_fonts" name="installing_fonts">Installing new fonts</a></h3>
|
||
<p>You install new fonts by copying them into their respective user folder, i.e. <span class="path">/boot/common/data/fonts/</span> or <span class="path">/boot/home/config/data/fonts/</span> (see topic <a href="../filesystem-layout.html">Filesystem layout</a>).</p>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="colors" name="colors">Colors</a></h2>
|
||
<img src="../images/prefs-images/appearance-colors.png" alt="appearance-colors.png" />
|
||
<p>In the <span class="menu">Colors</span> tab, you can change the colors of different parts of the user interface. The color well accepts drag&drops from other programs, letting you drag colors over from e.g. <span class="app">WonderBrush</span>, <span class="app">Icon-O-Matic</span> or the <span class="app">Backgrounds</span> panel.</p>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="decorators" name="decorators">Window decorators</a></h2>
|
||
<img src="../images/prefs-images/appearance-decorators.png" alt="appearance-decorators.png" />
|
||
<p>Decorators determine the look and feel of windows and all GUI elements. Currently Haiku comes with only one default decorator. Should you find and install other decorators, you can choose a different one from the pop-up menu.</p>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="antialiasing" name="antialiasing">Antialiasing</a></h2>
|
||
<img src="../images/prefs-images/appearance-antialiasing.png" alt="appearance-antialiasing.png" />
|
||
<p>The tab <span class="menu">Antialiasing</span> provides different settings for how things are rendered on screen.</p>
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
Glyph hinting</h3>
|
||
<p>An activated <span class="menu">Glyph hinting</span> aligns all letters in such a way that their vertical and horizontal edges rest exactly between two pixels. The result is a perfect contrast, especially when dealing with black on white. Text appears crisper. There's also a setting for <span class="menu">Monospaced fonts only</span> that's especially helpful with low resolution devices like netbooks. Small fonts can look pretty bad when hinting is turned on, but with this setting you still have the advantage of hinting for text editors and Terminal.</p>
|
||
<p>See the difference hinting makes with these magnified screenshots:</p>
|
||
<table summary="layout" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td style="text-align:center; font-style:italic"><img src="../images/prefs-images/appearance-glyph-off.png" alt="appearance-glyph-off.png" /><br />Hinting: off</td><td style="width:15px;"></td><td style="text-align:center; font-style:italic"><img src="../images/prefs-images/appearance-glyph-on.png" alt="appearance-glyph-on.png" /><br />Hinting: on</td></tr>
|
||
</table>
|
||
<p>It should be pointed out that all the <span class="app">Magnify</span> windows on this page are of course rendered themselves with the different options as well. So, you get a real world impression of the settings by comparing, for example, the bold yellow tab title or the text "33 x 15 @ 8 pixels/pixel".</p>
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
Antialiasing type</h3>
|
||
<p>Another technique to improve rendering is <i>Antialiasing</i>, which supports all vector graphics as well as text. It smooths lines by changing the color of certain pixels. There are two methods for that:</p>
|
||
<p><span class="menu">Grayscale</span> changes the intensity of pixels at the edge.<br />
|
||
<span class="menu">LCD subpixel</span> does an even better job, especially with (high resolution) LCD monitors. Instead of the intensity of a pixel, it changes its color which moves an edge by a fraction of a pixel, because LCD displays produce every pixel with a red, green and blue component.</p>
|
||
<p>Again, the two different methods with magnified screenshots:</p>
|
||
<table summary="layout" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td style="text-align:center; font-style:italic"><img src="../images/prefs-images/appearance-glyph-off.png" alt="appearance-glyph-off.png" /><br />Grayscale, Hinting: off</td><td style="width:15px;"></td><td style="text-align:center; font-style:italic"><img src="../images/prefs-images/appearance-subpixel.png" alt="appearance-subpixel.png" /><br />LCD subpixel, Hinting: off</td></tr>
|
||
</table>
|
||
<p>Subpixel based antialiasing adds a slight colored shine to objects. Something not everyone tolerates. In Haiku you can mix the two antialiasing methods and find the right setting for you by using a slider.</p>
|
||
<div class="box-info">The subpixel based antialiasing in combination with the glyph hinting is subject of a software patent and is therefore not available by default. Depending on where in the world you live, you may get an unlocked version. Sorry about that. Talk with your representative.</div>
|
||
<p>If you do activate hinting plus LCD subpixel rendering by changing the source and recompiling, this is how it looks compared to hinting with Grayscale:</p>
|
||
<table summary="layout" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td style="text-align:center; font-style:italic"><img src="../images/prefs-images/appearance-glyph-on.png" alt="appearance-glyph-on.png" /><br />Grayscale, Hinting: on</td><td style="width:15px;"></td><td style="text-align:center; font-style:italic"><img src="../images/prefs-images/appearance-glyph-on-subpixel.png" alt="appearance-glyph-on-subpixel.png" /><br />LCD subpixel, Hinting: on</td></tr>
|
||
</table>
|
||
<p><br /></p>
|
||
<p>At the bottom of the panel are two buttons:</p>
|
||
<table summary="layout" border="0" cellpadding="2" cellspacing="0">
|
||
<tr><td><span class="button">Defaults</span></td><td> </td><td>resets everything to default values.</td></tr>
|
||
<tr><td><span class="button">Revert</span></td><td> </td><td>brings back the settings that were active when you started the Appearance preferences.</td></tr>
|
||
</table>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<div class="inner"><span>
|
||
<a href="../preferences.html" class="uplink">Preferences</a>
|
||
:: <a href="backgrounds.html">Backgrounds</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|