如何计算服务器端应用的填充量?
是否可以在服务器端运行浏览器运行的相同进程,以便将 CSS 应用到 DOM?
例如,我可以使用一个 HTML 文档,应用所有 CSS 规则(链接、嵌入和内联)来计算出任何元素的属性吗?我最关心的是盒子模型(即它的位置、边距、边框和填充)。
到目前为止我能想到的唯一方法是使用 Selenium RC 和 jQuery 将值传回。然而,这似乎非常消耗资源,所以我想知道是否还有其他方法。我环顾 Google,搜索“解析 CSS”只会带来读取单个样式的结果,而不是将所有 CSS 规则应用于整个 DOM,然后计算出结果。
任何语言都可以。
示例(不是真正的用例,而是类似的用例)
您正在构建一个 API,它允许了解 HTML 和 CSS 的人生成 Java GUI。 API 允许开发人员传入 HTML,然后返回所有代码来构造 GUI,所有元素具有相同的大小和位置。
Is it possible to run on the server-side the same process that browsers run in order to apply CSS to the DOM?
For example, could I take a HTML document, apply all the CSS rules (linked, embedded and inline) to work out for any element its attributes. I'm mostly concerned about the box model (i.e. its position, margin, border and padding).
The only way I can think of so far is to use Selenium RC and jQuery to pass the values back. However, this seems very resource-intensive, so I'm wondering if there's another way. I've looked around Google and searches for 'parsing CSS' only bring results for reading individual styles, not applying all CSS rules it to the whole DOM and then working out the results.
Any language will do.
Example (not the real use case, but a similar one)
You're building an API which allows people who know HTML and CSS to generate Java GUIs. The API allows the developer to pass in their HTML, and it then returns back all the code to construct the GUI, with the same sizes and positions for all the elements.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
首先阅读这篇关于浏览器如何工作的文档,以实现计算类似的内容这需要一个布局引擎。诸如渲染字体和图像的尺寸以及具有复杂的边距折叠规则的盒模型等因素都会影响最终的布局。
除非您可以在服务器端应用程序中托管布局引擎(例如 WebKit),否则您正在考虑实现布局引擎,减去屏幕上的实际绘画,只是为了建立您的应用程序的布局(如果我正确理解您的要求)。
话虽如此,WebKit 引擎在很多项目中都有使用,但大多数都是浏览器 或其他客户端软件。在 Google 上快速搜索确实发现了一个有趣的结果:
如果您无法托管现有的布局引擎,则可能有一些类似 HTML (XML) UI 布局技术可用的。也许那些是更好的选择?例如 Microsoft 的 Silverlight/XAML、Adobe 的 MXML(也支持一些 CSS 规则),UIML,或 Mozilla 的 XUL。
Start by reading this document on how browsers work to realize that to calculate something like that requires a layout engine. Things like the dimensions of rendered fonts and images, as well as the box model with its complex rules for margin collapsing, and more all influence the final layout.
Unless you can host a layout engine (like WebKit) in your server-side application you are looking at implementing a layout engine, minus the actual painting to screen, just to establish the layout of your application (if I understand your requirements correctly).
Having said that, the WebKit engine is used in a lot of projects, but most of them are browsers or other client-side software. A quick search on Google did turn up one interesting result:
If you can't host an existing layout engine, there may be some HTML-like (XML) UI layout technologies available. perhaps those are a better option? E.g. Microsoft's Silverlight/XAML, Adobe's MXML (supports some CSS rules as well), UIML, or Mozilla's XUL.
另外,看看 http://htmlunit.sourceforge.net/ 库,它尝试使用以下命令模拟浏览器全力支持。
Also, have a look at http://htmlunit.sourceforge.net/ library, which tries to emulate browsers with full support.