Giter Club home page Giter Club logo

Comments (4)

sabberworm avatar sabberworm commented on May 3, 2024

Could you give me an example of what you mean? I don’t think this (if I understand you correctly) is possible solely with knowledge of the CSS without knowing the DOM.

from php-css-parser.

jarodium avatar jarodium commented on May 3, 2024

I think you have it right.
I was thinking of forcing the user to have a width definition on a root element. That way, the parser should assume 100% is the root element.

Example:

<div style="width:1005px">
       <div id="sub1">

       </div>
</div>

Let us make some assumptions based on a "reset.css". Margins and Paddings are defaulted at 0, but this first div must have a width. Now, assuming that there are no widths, all elements below must have 100% width.

If the root element has a 1px border, then 100% for the child divs would be 1003px.

I'm trying to find the best possible solution for converting a fully styled webpage to PDF, but the converters out there lack in CSS parsing so I was thinking of mashing your library against a PDF generator, with PHP.

Hopefully I make sense.

Regards

from php-css-parser.

sabberworm avatar sabberworm commented on May 3, 2024

So you could use PHP’s DOMDocument::loadHTMLFile to construct a DOM from your HTML. Unfortunately, there is no CSSOM in PHP. And you’re missing the glue to combine that DOM with a PHP-CSS-Parser Document object. For this to work there are two important parts missing:

  • A way of matching DeclarationBlock objects to DOM elements using their selectors. Selectors currently aren’t in any way parsed. So you’d need to be able to adopt the parser to understand that it’s parsing an element selector, class selector, id selector, and how the selectors are nested. You’d then need to be able to check whether a specific DOM nodes matches a selector or not.
  • The ability to apply cascading rules to DOM elements to have all calculated styles on every element. This includes converting relative units like em and % to their absolute counterparts by taking the parent element‘s calculated style value.

As a result of this, you’d have a tree of DOM nodes where each node has a complete set of calculated styles which you then could use to draw your PDF. You could choose to only apply certain styles like width, height, font-size and so forth or go for a complete implementation.

If you decide to go forward with this plan, I’d be very interested to incorporate the results of the selector parsing back into my code as that has been on my to do list for a long time. I wish you the best of luck with this endeavour.

from php-css-parser.

sabberworm avatar sabberworm commented on May 3, 2024

There is actually a DOM query library that takes CSS selectors. Maybe you could use that somehow and skip the step where you improve PHP-CSS-Parser’s selector parsing.

from php-css-parser.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.