artist has asked for the wisdom of the Perl Monks concerning the following question:

Dear Monks,
I like to apply uniform fonts and styles to the website. So, I like to take 'font' tag from html to css. What should be my flow of process, including using any modules? How do I find pieces of text, without any fonts?

Thanks,

--Artist

2006-03-10 Retitled by g0n, as per Monastery guidelines
Original title: 'Styling WebSite'

Replies are listed 'Best First'.
Re: (OT) Styling WebSite
by Your Mother (Archbishop) on Mar 07, 2006 at 18:37 UTC

    I think you're going about it backwards. What you should do is find pieces of text with font information and strip it out. Then CSS can be applied with predictable results to the pages.

    For modifying the X?HTML I'd recommend HTML::TreeBuilder or HTML::TokeParser. It's not difficult at all (though it can be a bit verbose). There are a few CSS modules too but probably not what you need.

    update: took a stab at it below.

Re: (OT) Styling WebSite
by atcroft (Abbot) on Mar 07, 2006 at 18:35 UTC

    You might want to look at HTML Tidy/libtidy (and possibly the HTML::Tidy module, which uses libtidy). If memory serves, tidy has options that will allow you to replace certain tags with CSS, which might prove useful in what you are trying to do.

    Another option would be to use one of the modules for parsing the HTML document, then look for those tags/attributes you wish to replace. (I suspect the earlier option might be quicker and easier, though.)

    Hope that helps.

Re: (OT) Styling WebSite
by ww (Archbishop) on Mar 07, 2006 at 19:43 UTC

    Have to agree with Your_Mother here but with the caveat that it might be far more instructive and long_term_useful to learn css rather than spend the time trying to automate the procedure (especially <begin_snippy_aside< since your question suggests you have neither read how to ask a question nor taken the trouble to try to code anything</snippy_aside>)

    FWIW, IMO, css is -- with VERY few exceptions, mostly occasioned by cross-browser issues -- extremely simple to grok and write; certainly no more difficult that basic html.

    And having made the effort to work out styles that suit your site, then atcroft's recommendation re htmltidy gets my vote too... accompanied by a hanging chad that you might want to check the w3c's online html and css validators (both linked from w3c's front page.

Re: (OT) Styling WebSite
by Your Mother (Archbishop) on Mar 08, 2006 at 08:21 UTC

    Oh, okay. I decided to take a whack at it. Normal HTML caveats apply, edge cases and all that, but this should work pretty well. It even tries to determine if the font tag is alone in a parent so that the style can be bumped to the parent. In cases like-

    <td><font size="6">Pretty BIG</font></td> # we'll get (updated typo in "larg") <td style="font-size:x-large">Pretty BIG</td>

    Barely tested though I think it's pretty solid. Improvements welcome. (Update: tested a bit and found 2 bugs, fixed now with inline test case.)

    use strict; use warnings; no warnings 'uninitialized'; use HTML::TreeBuilder; use HTML::Element; my %size_convert = qw( 1 xx-small 2 x-small 3 small 4 medium 5 large 6 x-large 7 xx-large -6 40% -5 50% -4 60% -3 70% -2 80% -1 90% -0 100% +0 100% +1 120% +2 140% +3 160% +4 180% +5 200% +6 250% ); # Program proper #===================================================================== my $file = shift; $file or warn "No file given, using test HTML!\n"; $file = \*DATA; my $tree = HTML::TreeBuilder->new(); # empty tree $tree->parse_file($file); for my $node ( $tree->descendants() ) { next unless $node->tag() eq 'font'; my $font_style = extract_style( $node ); $font_style->{"font-size"} = $size_convert{ $node->attr('size') } if $size_convert{ $node->attr('size') }; $font_style->{"font-family"} = $node->attr('face') if $node->attr('face'); $font_style->{color} = $node->attr('color') if $node->attr('color'); if ( $node->parent() and $node->parent->content_list() == 1 ) { my $parent = $node->parent; my $parent_style = extract_style( $parent ); $font_style = { %{$parent_style}, %{$font_style}, }; my $style = generate_style_string($font_style); $parent->attr("style", $style); $parent->push_content( $node->as_text() ); $node->delete(); } else # replace font with span { my $style = generate_style_string($font_style); my $span = HTML::Element->new('span', style => $style ); $node->replace_with($span); } } print $tree->as_HTML(); exit 0; # Subroutines #===================================================================== sub generate_style_string { my $style_hash = shift; my @style; while ( my ( $k, $v ) = each %{$style_hash} ) { push @style, join(":", $k, $v); } return join "; ", @style; } sub extract_style { my $node = shift; my %style; %style = map { split /:/ } split /;/, $node->attr('style') if $node->attr('style'); return \%style } __DATA__ <table><tr> <td style="border:solid 1px black;"><font size="+2">Some text</font></ +td> </tr> </table> <p>Something with <font color="#ffee98" size="7" face="Times">3 style points</font></p> <p style="color:#aaa"><font color="red" face="Times">3 style points</f +ont></p>
Re: (OT) Styling WebSite
by TedPride (Priest) on Mar 08, 2006 at 01:11 UTC
    Moving from HTML text formatting to CSS pretty much requires redoing everything. There's no easy way to go about it. That having been said, most of your changes will be to table contents, to change all those nested font tags to a single style definition. Probably the easiest way to do this is just remove all the font tags:
    s/<\/?font.*?>//sg;
    Then you give your table a class (let's say datatable), and define the equivalent of your font tags for .datatable td { }