TagCloud block view

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
LazyBadger
Regular
Posts: 176
Joined: Mon Aug 25, 2008 12:25 pm
Location: Russia
Contact:

TagCloud block view

Post by LazyBadger »

Just to note - compare two views of the same source (XML and NoNL-mode selected). I'll be happy to see browser-independent code, which will show tags always with buttons in Opera-style, without widow xml.gif and the end of line.
BTW, I suppose nbsp in multiword's tags isn't best choice for long tags in narrow block
Opera 11.11 TagCloud
Opera 11.11 TagCloud
good-Opera.gif (1.84 KiB) Viewed 6390 times
Firefox (and Safari) TagCloud
Firefox (and Safari) TagCloud
bad-FF.gif (1.84 KiB) Viewed 6390 times
Quis custodiet ipsos custodes?
LazyBadger
Regular
Posts: 176
Joined: Mon Aug 25, 2008 12:25 pm
Location: Russia
Contact:

Re: TagCloud block view

Post by LazyBadger »

Yes, I tried to play with spans

Code: Select all

<span class="serendipity_freeTag_xmlTagEntry">
    <a ...>
        <img ... class ...>
    </a>&nbsp;
    <span class ... style ...>
        <a ...>
            Tag here
        </a>
    </span>
</span>
chain (with space and nbsp in multiwords tags, reverse hierarchy of internal span and a - span -> a vs a -> span) with no luck
Quis custodiet ipsos custodes?
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: TagCloud block view

Post by garvinhicking »

Hi!

Did you try setting the CSS "white-space: no-wrap" attribute?

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
LazyBadger
Regular
Posts: 176
Joined: Mon Aug 25, 2008 12:25 pm
Location: Russia
Contact:

Re: TagCloud block view

Post by LazyBadger »

I see at no-wrap as at a "last resort" - because in case of long tag-string (wider than container) tag will be trimmed (which is bad behavior for aesthetic view) instead of wrapping words on new line (how it can be done now, if tags will get space between words instead of nbsp)
Quis custodiet ipsos custodes?
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: TagCloud block view

Post by garvinhicking »

Hi!

I'm not sure I understand. What exactly are you suggesting to do?

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
LazyBadger
Regular
Posts: 176
Joined: Mon Aug 25, 2008 12:25 pm
Location: Russia
Contact:

Re: TagCloud block view

Post by LazyBadger »

In terms of generated HTML (partial example from block code)

Code: Select all

<img alt="xml" src="/templates/tabacco_s9y_07/img/xml.gif" class="serendipity_freeTag_xmlButton"></a>&nbsp;<span class="tag_weight_205" style="font-size: 205%;"><a rel="tag" href="http://www.lazybadger.ru/plugin/tag/%D0%BD%D0%B0+%D0%B7%D0%BB%D0%BE%D0%B1%D1%83+%D0%B4%D0%BD%D1%8F" title="на злобу дня (17) ">на&nbsp;злобу&nbsp;дня</a>
will become semantically clean

Code: Select all

<img alt="xml" src="/templates/tabacco_s9y_07/img/xml.gif" class="serendipity_freeTag_xmlButton"></a> <span class="tag_weight_205" style="font-size: 205%; white-space: normal;"><a rel="tag" href="http://www.lazybadger.ru/plugin/tag/%D0%BD%D0%B0+%D0%B7%D0%BB%D0%BE%D0%B1%D1%83+%D0%B4%D0%BD%D1%8F" title="на злобу дня (17) ">на злобу дня</a>
nbsp between img and span must not work according to specification (string elements aren't words), nbsp between words in multiword tags are bad idea - it will not allow wrap tag text,when it's needed.

For second HTML we'll have to have additional changes
1 In CSS
a)

Code: Select all

.serendipity_freeTag_xmlTagEntry {
    white-space: pre; /*nowrap can't be redefined in internal span*/
}
(container for xml-button and text, provide no-widow xml-button instead of nbsp)
b) for 2 from 3 themes I had to add

Code: Select all

.serendipity_freeTag_xmlButton {
   	border: none;
}
otherwise xmlbutton got border around
2. Wrapping of tag text we'll get with inline styling of span by white-space: normal and using spaces instead of nbsp (str_replace on str. 607 of serendipity_event_freetag.php)

Full path for event_freetag inline

Code: Select all

--- D:/Sites/mayorat.e-city.net.ru/web/blog/plugins/serendipity_event_freetag/serendipity_event_freetag.php	Пн май  9 10:19:30 2011
+++ Z:/serendipity_event_freetag.php	Пт июн  3 15:26:06 2011
@@ -584,7 +584,7 @@
 
             if ($xml) {
                 $html .= '<span class="serendipity_freeTag_xmlTagEntry"><a rel="tag" class="serendipity_xml_icon" href="' . $rsslink . urlencode($name) . '" title="' . htmlspecialchars($name) . '">'.
-                         '<img alt="xml" src="' . $xmlImg . '" class="serendipity_freeTag_xmlButton" /></a>&nbsp;';
+                         '<img alt="xml" src="' . $xmlImg . '" class="serendipity_freeTag_xmlButton" /></a> ';
             }
 
             if ($scaling) {
@@ -599,12 +599,12 @@
                 } else {
                     $fontSize = round(($quantity - $smallest)*(($maxSize - $minSize)/($scale))) + $minSize;
                 }
-                $html .= '<span class="tag_weight_' . $fontSize . '" style="font-size: '. $fontSize .'%">';
+                $html .= '<span class="tag_weight_' . $fontSize . '" style="font-size: '. $fontSize .'%; white-space: normal;">';
             } else {
                 $fontSize = 100;
             }
 
-            $html .= '<a rel="tag" href="' . $taglink . serendipity_event_freetag::makeURLTag($name) . '" title="' . htmlspecialchars($name) . ($quantity > 0 ? ' (' . $quantity . ') ' : '') . '">' . str_replace(' ','&nbsp;',htmlspecialchars($name)) . '</a>';
+            $html .= '<a rel="tag" href="' . $taglink . serendipity_event_freetag::makeURLTag($name) . '" title="' . htmlspecialchars($name) . ($quantity > 0 ? ' (' . $quantity . ') ' : '') . '">' . htmlspecialchars($name) . '</a>';
     
             if ($scaling) {
                 $html .= '</span>'; 
and attached
Attachments
serendipity_event_freetag-diff.zip
Diff for php
(756 Bytes) Downloaded 359 times
Quis custodiet ipsos custodes?
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: TagCloud block view

Post by garvinhicking »

Hi!

Ok, I've committed your patch! Thanks!

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Post Reply