Algorithm to print CSS from an HTML document tree

Jon Skeet's mentor

Right now I'm trying to make a recursive function that takes an HTML document tree and returns a string representing formatted CSS using only children (>) operators. I'll explain it further and maybe you can help me where I'm stuck. At least please give me some hints or ideas.

So the idea is to go from something like

                  body
               /       \
             div        div
            /   \    /   \  \
           h1   p   p    ul  div
                        / \
                       li  li 

to

div
    div > h1
    div > p
    div > p
    div > ul
        div > ul > li
        div > ul > li
    div > div

or, if you prefer,

"div\n\t div > h1\n\tdiv > p\n\tdiv > p\n\tdiv > ul\n\t\tdiv > ul > li\n\t\tdiv > ul > li\n\tdiv > div"

I already have a procedure that gets the body and the tree growing from it. The 3 functions I'll need are members of an object called XMLNode

  1. getChildNode(int k) returns the XMLNode object that is the kth child. If none exists, then the object return has property
  2. isEmpty().
  3. getName() returns the name of the node as a string-like object which can be cast into a string.

So my attempt at writing a procedure that does what I need is calling

std::cout << tree2CSS(bodyNode);

where the function tree2CSS is implemented like

std::string tree2CSS(XMLNode & rootNode, unsigned depth = 0)
{
    int i = 1;
    XMLNode childNode = rootNode.getChildNode(i);
    std::string accumCSS;
    while (!childNode.isEmpty())
    {
        std::string tabs(depth, '\t');
        accumCSS.append("\n" + tabs);
        if (depth > 0) accumCSS.append(" > ");
        accumCSS.append((std::string)childNode.getName() + tree2CSS(childNode, depth + 1));
        childNode = rootNode.getChildNode(++i);
    }
    return accumCSS;
}

Problem is, that procedure isn't working and I can't figure out why. Can anyone help me?

M Oehm

You want to print the whole ancestry for each element, so you must somehow keep track of all parents, not just the depth.

I think that prining is better handled once for each element outside the loop and the loop is just for visiting the children.

Here's an alternative implementation:

std::string tree2CSS_(XMLNode& rootNode, std::vector<std::string>& pred)
{
    std::string accumCSS(pred.size(), '\t');
    std::string name = rootNode.getName();

    for (size_t i = 0; i < pred.size(); ++i) {
        accumCSS += pred[i] + " > ";
    }
    accumCSS += name + "\n";

    size_t i = 0;
    XMLNode& childNode = rootNode.getChildNode(i);

    pred.push_back(name);
    while (!childNode.isEmpty()) {
        accumCSS.append(tree2CSS_(childNode, pred));
        childNode = rootNode.getChildNode(++i);
    }
    pred.pop_back();

    return accumCSS;
}

std::string tree2CSS(XMLNode& rootNode)
{ 
    std::vector<std::string> pred;
    return tree2CSS_(rootNode, pred);
}

I've used a vector of preceding strings here, whose size if of course the recursion depth. The iplementation is divided into a front-end function, which provides the vector, and the recursive implementation.

This implementation prints the body node and also prepends the body to all CSS declarators. If you want to skip the top-most node, loop over body's children in the front-end function.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Algorithm to print CSS from an HTML document tree

From Dev

Android : Print html document from WebView

From Dev

C# print html document from html string

From Java

Android: Unable to Print/PDF html document from WebView (version: 86.0.4240.75)

From Dev

Print from JavaScript function to HTML without document.write()

From Dev

HTML 5 Document Outlining Algorithm

From Dev

Vertical Tree with CSS and HTML

From Dev

Print CSS properties to HTML

From Dev

Why won't my HTML page print according to my CSS document?

From Dev

HTML/CSS Progess Bar shows on browser but doesnt show when trying to print the document

From Dev

How to print data from left to right in html using css

From Dev

.net print HTML document in landscape representation

From Dev

Pause a document - HTML, CSS, JavaScript

From Dev

CSS code not affecting HTML document

From Dev

Print HTML & CSS via PHP

From Dev

Is there a command to find and then print a line from a document?

From Dev

Trouble trying to print string in order from a tree

From Dev

How can I print infix from tree?

From Dev

Trouble trying to print string in order from a tree

From Dev

Print range - print from page x until end of document

From Dev

Get a value from an html document

From Dev

Getting the XPath from an HTML document

From Dev

Print text on HTML from JavaScript

From Dev

How do I convert a docutils document tree into an HTML string?

From Dev

CSS color change in basic HTML document

From Dev

document.getElementById JS HTML CSS

From Dev

Horizontal Family tree with CSS and HTML - reversed

From Dev

HTML / CSS - Tree Layout / Flowchart Options

From Dev

Displaying data in a tree model in HTML/CSS/JQuery

Related Related

HotTag

Archive