Dillo 0.86文档翻译 --- DwStyle.txt (转载)
田镜
2023-12-01
Dw样式
DwStyle
=======
Dw部件的样式
注意
====
Dw样式曾经是由DwPageAttr驱动的,现在的也非常相似。将来将会有一些更改和扩
展。如下:
- 图片的映射将会有所不同
- 空白,边界以及填充
- 背景,图片以及颜色
- 光标工具提示也许会移动到Dw样式中来
还有,不同的状态下,部件也许会用到不同的样式
概览
========
Dw样式为绘制部件提供了资源以及一些属性,作为部件的一部分(例如Dw页面使用
为它的文字使用Dw样式)。创建一个样式就是设置好Dw样式的属性(ref_count除外)
,然后就是调用Dw_style_new:
DwStyle style_attrs, *style;
style_attrs.foo = bar;
// 等等...
style = a_Dw_style_new (&style_attrs, random_window);
// 然后就可以使样式
这以后,演示的属性不应该再被更改,因为样式会被多个不同的部件所使用。大多
数的情感况下,你可以简单的复制其他样式的属性然后修改他们:
style_attrs = *another_style;
style_attrs.foo = bar;
style = a_Dw_style_new (&style_attrs, random_window);
字体的结构体可以通过Dw_style_font_new函数来创建,一个类似的方法(属性
中的GdkFont将被忽略),颜色可以使用0xrrggbb格式的参数通过
Dw_style_color_new来创建。注意,对于雅士来说字体以及颜色是一起使用的。
长度与百分比
=======================
Dw样式长度是表现长度和百分比的简单数据类型:
- 长度是一个绝对的测量单位。他使用HTML中的像素(%Pixels)单位来表现,以
及css中的<length>类型。
对于CSS长度,有两种单位:(i)绝对的像素单位,和CSS标准中不同,以绝对
的单位对待。(ii)相对的"em" 和 "ex"单位(见下面)。
- 百分比涉及到另一个相关的数据。使用HTMl中的%Length来表现(%Pixels;除外)。
CSS中使用<percentage>。
- 一个相对的长度可以用在夺杯的长度列表中
因为很多CSS中的值有可能使长度也可能百分比,所以一个单一的类型就很有用处。
使用宏和函数
---------------------------
创建长度的宏:
DW_STYLE_CREATE_LENGTH (n) 返回n个像素的长度
DW_STYLE_CREATE_EX_LENGTH (n) 返回n倍'x-height'的长度
DW_STYLE_CREATE_EM_LENGTH (n) 返回n倍'font-size'的长度
DW_STYLE_CREATE_PERCENTAGE (n) 返回一个比例,其中n相对于1而不是100
DW_STYLE_CREATE_RELATIVE (n) 返回一个相对长度
DW_STYLE_UNDEF_LENGTH 用来指示尚未指定大小的错误,最后列举出长度
此外在html.c中还有这些函数:
DwStyleLength Html_parse_length (gchar *attr);
返回长度或者百分比,或者DW_STYLE_UNDEF_LENGTH错误
DwStyleLength* Html_parse_multi_length (gchar *attr);
返回一个长度/百分比的矢量。如果调用者不再使用,须要自行释放这个矢量
检查长度的宏:
DW_STYLE_IS_LENGTH (l) 如果l是长度则返回 TRUE
DW_STYLE_IS_PERCENTAGE (l) 如果l是百分比则返回 TRUE
DW_STYLE_IS_RELATIVE (l) 如果l是相对长度则返回 TRUE
DW_STYLE_GET_LENGTH (l, f) 如果l是基于字体大小的,返回像素单位的整
型长度值。其中f是字体。
DW_STYLE_GET_PERCENTAGE (l) 返回和l相对的浮点数型的百分比值
DW_STYLE_GET_RELATIVE (l) 返回浮点数型的相对长度
表现
--------------
注意:
1. 这并不是一个接口,很可能会有改动!如果需要请使用上面的宏
2. 负数还不支持
Dw样式长度表现为一个整数(n是一个整数位数):
- 未定义的长度以0表示
- 像素长度:
+---+ - - - +---+---+---+---+
| 整数值 | 0 | 1 |
+---+ - - - +---+---+---+---+
n-1 3 2 1 0
- x-height的长度
+---+ - - - +---+---+---+---+
| 实数值 | 0 | 1 | 1 |
+---+ - - - +---+---+---+---+
n-1 3 2 1 0
- font-size的长度
+---+ - - - +---+---+---+---+
| 实数值 | 1 | 1 | 1 |
+---+ - - - +---+---+---+---+
n-1 3 2 1 0
- 百分比
+---+ - - - +---+---+---+---+
| 实数值 | 0 | 1 | 0 |
+---+ - - - +---+---+---+---+
n-1 3 2 1 0
- 相对长度
+---+ - - - +---+---+---+---+
| 实数值 | 1 | 1 | 0 |
+---+ - - - +---+---+---+---+
n-1 3 2 1 0
一个"实数"是一个如果下组成的定点数(其中m是值的位数,而不是整个的位数)
+---+ - - - +---+---+ - - - +---+
| 整数部分 | 其余部分 |
+---+ - - - +---+---+ - - - +---+
m 16 15 0
在内部使用,有两个转换的宏DW_STYLE_REAL_TO_FLOAT和DW_STYLE_FLOAT_TO_REAL
Dw样式盒子
=============
CSS盒子模式
-----------------
对于边界空白等,Dw样式使用了CSS2种的盒子模式。Dw样式包含的一些成员
定义了这些属性。对于任何的大小的计算部件都必须使用这些值。下面是一些
有用的函数(见dw_style.h)。一个Dw样式盒子看起来很像一个CSS盒子:
,-- margin.left 空白 左边
| ,-- border.left 边界 左边
| | ,-- padding.left 填充左边
|---+---+---|
+---------------------------------------+ --- 空白 顶部
| | | margin.top
| +-------------------------------+ | -+- 边界 顶部
| | 边界 | | | border.top
| | +-----------------------+ | | -+- 填充 顶部
| | | 填充 | | | | padding.top
定位一个 | | | +---------------+ | | | ---
新部件 -->| | | | | | | |
| | | | 内容 | | | |
原来的 ------------>| | | | |
部件定位 | | | +---------------+ | | | --- 空白 底部
| | | | | | | margin.bottom
| | +-----------------------+ | | -+- 边界 底部
| | | | | border.bottom
| +-------------------------------+ | -+- 填充 底部
| | | padding.bottom
+---------------------------------------+ ---
|---+---+---|
填充 右边 padding.right --' | |
边界 右边 border.right --' |
空白 右边 margin.right --'
背景色
-----------------
背景色储存在style->background_color中,值是是NULL(这样一个部件会直接
使用其父部件的背景色)。
对于顶部的部件,这个值被设置成为视口的背景色。对于其他的部件,一个矩形
被填充覆盖当前的颜色以及填充。(这是符合CSS2,顶部成员的背景色覆盖整个画布)
绘制
-------
一个新的函数Dw_widget_draw_widget_box,应该是在Dw_foo_draw函数以开会i就调
用的。对于局部的样式(例如页面上的文字),就应该使用Dw_widget_draw_box。
关于内存管理的说明
==========================
内存管理是通过对引用的计数来实现的,a_Dw_style_new函数返回一个指向Dw样式的
指针,其中就有而对这个样式的引用计数。所以如果你以后不再调用Dw_style_unref
话,调用这个函数就非常的小心了。你不需要关心对字体以及样式的引用计数。
细节上:
- a_Dw_style_ref调用了
* a_Dw_widget_set_style, 为一个部件指派样式
* a_Dw_page_add_text,a_Dw_page_add_widget,a_Dw_page_add_anchor, 为
文字指派样式
* Html_push_tag (通常这之后引用计数会在短期内不再减少)
- a_Dw_unref_style调用了:
* Dw_page_destroy, Dw_widget_destroy, Html_cleanup_tag,
Html_pop_tag,Html_close
* a_Dw_widget_set_style, Html_set_top_font(还有很多Html_tag_open_..函数)
这些函数会会在已有的样式上面重新被绘制
HTML堆栈
==========
(这不是Dw样式的标准,但是,如果你的工作和HTMP解析器有关的话就会有用处)
HTML堆栈最顶的元素包含(引用)了一个样式,这个样式将被用于本页面的文本。如
果你只是短时期(参看Html_tag_open_frame)的使用一个样式,可以这样使用:
style_attrs = *html->stack[html->stack_top].style;
style_attrs.foo = bar;
style = a_Dw_style_new (&style_attrs, random_window);
不要忘记用玩了之后 unref 。对于random_window,一个比较好的选择是
html->bw->main_window->window
在很多情况下,你想要为元素的内容设置样式(例如<A>) ,这是你就必须把他们储
存在堆栈中:
DwStyle style_attrs, *old_style;
old_style = html->stack[html->stack_top].style;
style_attrs = *old_style;
style_attrs.foo = bar;
html->stack[html->stack_top].style =
a_Dw_style_new (&style_attrs, random_window);
a_Dw_style_unref (old_style);
宏HTML_SET_TOP_ATTR可以用于单个属性,如果需要改变多个属性,可以拷贝并修
改代码也有效。