浏览器在渲染图文混排的网页的时候是怎么控制行高的？

[jox]

比如这种情况：

图片和文字在同一行，文字的baseline会自动与图片的底部对齐。

对比之下的这种情况：

第二行没有图片，所以行高就是文字的高度。

我现在在开发的iOS应用，也要parse html，遇到类似的图文混在一起的数据，如果想要实现类似上面浏览器的这种效果，该怎么弄？我看目前的iOS应用里面遇到这种情况的解决方案是把图片的高度缩小成与文字高度一样，这样就不需要调整行高了，百度贴吧iOS客户端和微信都是这么做的，微信不能把兔斯基等动态表情和文字一起发送，能和文字一起发送的都是静态的黄豆表情，好像还没有哪款应用能实现类似浏览器的这种效果，感觉这个不太容易。

我目前想到的办法是一行一行地渲染文字，在新的一行开始的时候记录一下这一行第一个字符的位置，记为pos，如果在这一行结束之前遇到了图片，那么就把从pos到图片前的这段字符的行高设为图片的高度，然后底部与图片对齐，把图片需要的空间留出来继续parse，把这行填满之后另起一行继续，就这样一行一行地直到解析完所有的字符。

这样应该是可行的，但是我想知道一般的浏览器是怎么做的？有没有朋友有思路？

[akfish]

正经的做法是所有可渲染的对象（如Text，Image，Row）继承自同一父类（如RenderObject），各自实现layout方法，计算自己的boundbox，实现重绘等。一篇混排文档的数据表示就是RenderObject的树结构，一次渲染就是从根节点开始撸一遍渲染树。
《设计模式》一书里有详细的说明。
几乎所有的GUI框架、WYSIWYG编辑器、浏览器内核都是这样实现的，如webkit：
https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/

[blank_dlh]

Google Core Text

[jox]

@akfish 每个渲染对象彼此之间并不是独立的呀，那个链接里是一系列的文章，似乎没有谈到实现的细节啊。。。。


@blank_dlh core text可以实现这个效果，但是我想问的是具体的思路，不是用什么类库来实现呀，另外iOS 7新出的TextKit也可以的，TextKit是在core text的基础上构建的

[bilipan]

可以看看http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/这篇文章