当前位置: 首页 > 工具软件 > Dillo > 使用案例 >

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可以用于单个属性,如果需要改变多个属性,可以拷贝并修
改代码也有效。
 
 类似资料: