Re: [libreoffice-website] Re: [libreoffice-design] Fwd: LibO-3.3-rc1 download icons still mentions "beta"

Hi Christian, all,

Christian Lohmaier wrote:
> > [...]
>
> Yes, it would be interested to have a kind of howto for this, but only
> if you don't have other stuff to do right now.

I'll do a write-up after it's finalized - at the moment it's
fixed-width. Making it scale horizontally would be easy; vertically is
a different story - at least with this design - but I'll tinker around
to see how it might be done - I like a CSS challenge :)

> [...]
> Yes, although when using spriting, a different image on hover wouldn't
> be much of a problem.

This demo uses a sprite - the image changes while the background color
stays constant.

> The real improvement is to not having the text encoded within the image.
> For special buttons this can be done of course, but then the source
> should be available (xcf, whatever layered format), so that when the
> text needs to be changed you can just update the text-layer and
> resave)
>
> > I could imagine, that this might work for the navigation tabs on the LibO
> > website too, especially if a second horizontal navigation line (visible on
> > mouse over the first level nav) would be considered.
>
> Regarding this: I turned the tabs on pumbaa from using fixed-width
> buttons to sprited approach with dynamic width:
> http://pumbaa.ooodev.org:7780/
> http://pumbaa.ooodev.org:7780/themes/tdf/images/nav_sprites.png
> (in this case a button background consits of two elements: main
> background and the corner part)

Great stuff - we should use sprites wherever we can.

> > How do you avoid the text leaving the button because of line break or
> > different standard fonts (other height or width than the font you used)?
>
> The same technique could be applied to the button, i.e. have the
> buttons resize horizontally to fit the text. Scaling vertically is a
> little harder, you need to split it to top/bottom and have a middle
> area (possible with the buttons).

The top and middle could be condensed into one (at least with this
design) by vertically extending the middle portion of the button in
the image; it'd only add a few bytes to the file size if it's a PNG.
I'll create a fully flexible demo tomorrow.

> > Does this needs a fixed not-to-be-replaced font in the page definition?
>
> No - it is a matter of efforts though. It took me quite a while until
> I got the css right for the hover buttons, esp for the ones on the
> sidenavbar, where I wanted the text to run into the cornerpart, and
> not have the corner part as void space. But it is doable.
>
> > Here at my system (SeaMonkey 2.0.11 on Ubuntu 10.10) the lower button's text
> > is too broad for the button - this should be avoided:
> > http://imagebin.org/128305
>
> Easiest intermediate solution is to prevent line-wrap (using css) and
> just cut off the text horizontally (but add corresponding alt/title
> attribute so that one can read the full text on mouse-over)

Or we could use embedded fonts to have greater confidence in
cross-platform display (I just used 'sans-serif' to define the font
and that will certainly vary from platform to platform - hence what
was one line on my screen became 2 for Bernhard). We could easily use
Vegur for buttons that way... the font is tiny (9KB per variant) so it
could be done without too much trouble...

Regards,
Ivan.

-- 
Unsubscribe instructions: E-mail to website+help@libreoffice.org
List archive: http://www.libreoffice.org/lists/website/
*** All posts to this list are publicly archived for eternity ***