Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

quick'n'dirty HTML implementation #23

Closed
petrklus opened this issue Aug 28, 2014 · 7 comments
Closed

quick'n'dirty HTML implementation #23

petrklus opened this issue Aug 28, 2014 · 7 comments
Labels
Feature Request Need Contributor

Comments

@petrklus
Copy link

.. thought it may help!

def output_wordcloud_html(elements):
    output = """<html>
    <style type="text/css">
    @font-face {
        font-family: Tahoma;
        src: url("wordcloud/Tahoma.ttf");
    }
    body {
        font-family: Tahoma, Helvetica, Arial, sans-serif;
    }
    div {
        transform-origin: 0% 100%;
    }
    div.rot {
        transform: rotate(-90deg) translate(-50%, 0);            
    }
    </style>

    <body>"""
    for (word, count), font_size, position, orientation in elements:        
        rot = -90 if orientation else 0   
        left = position[1]+font_size if orientation else position[1] 
        top =  position[0] if orientation else position[0] - font_size/4
        values = {
            "top": top,
            "left": left,
            "word": word,
            "font_size": font_size,
            "class" : "rot" if orientation else "norm"
        }
        output += """<div class="{class}" style="position:absolute; top:{top}px; left: {left}px;font-size:{font_size}px;">{word}</div>""".format(**values)
    output+="</body></html>"

    return output
@petrklus
Copy link
Author

has small issue with vertical placement of the rotated elements - any interest in finishing it?

@amueller
Copy link
Owner

yeah that is pretty cool :) I'd be super interested as you can then attach links to the words (and you have a nice vector graphic). Unfortunately I am kinda busy at the moment :-/

@petrklus
Copy link
Author

petrklus commented Sep 4, 2014

I may have a quick go - the only element not currently working 100% are the rotated elements - what is PIL using as a start of drawing (which corner) and centre of rotation? Knowing that I can match the HTML more closely..

@amueller
Copy link
Owner

amueller commented Sep 7, 2014

Hum, it has been a while since I wrote that part.... I think the coordinates are just the top left corner of the rectangle that contains the text. The text is not really rotated around anything, a rotated version is created and then a place is found for a rectangle of the resulting size.

@petrklus
Copy link
Author

Ok, understood.. would need to adapt the rotated code slightly. Will see if
I find time to have a look!

Best,

Petr

On Sun, Sep 7, 2014 at 11:58 PM, Andreas Mueller notifications@github.com
wrote:

Hum, it has been a while since I wrote that part.... I think the
coordinates are just the top left corner of the rectangle that contains the
text. The text is not really rotated around anything, a rotated version is
created and then a place is found for a rectangle of the resulting size.

—
Reply to this email directly or view it on GitHub
#23 (comment).

@amueller amueller mentioned this issue Apr 29, 2015
Closed
@amueller
Copy link
Owner

I tried several times to make this work, but I don't think it actually can :-/

@amueller
Copy link
Owner

amueller commented Jan 8, 2020

Done with SVG in #519

@amueller amueller closed this as completed Jan 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature Request Need Contributor
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@amueller @petrklus