Replacing class="alignright" etc Was: Re: Linking stylesheet to RSS feeds

[Lynne Pope]

2009/6/17 Joost de Valk <joost@...>

> Disclaimer: I didn't follow this thread entirely, so sorry if I say
> something that's already been said.
>
> Wouldn't it be cool if WordPress automatically replaced class="alignright"
> and "alignleft" etc with good inline CSS? That's always annoyed me a bit...
> Might make a plugin for that, since it's actually pretty darn easy to do,
> but still, shouldn't that be in core?
>
> Best,
> Joost
>

Nope, sorry, disagree. Having it simply as a class allows for easy
customisation. As it is, alignright and alignleft are styled differently for
global.css and RTL (where they get swapped around).

One day there will be loads of admin themes being developed by 3rd party
developers and they would end up having to hack the core to get rid of
inline styles ;)

Here's why...
Inline styles apply only to the element they are set on. They take
precedence over everything else in the cascade. Its impossible to style
pseudo-elements and -classes with inline styles and impossible to override
them in external CSS.
Added to this, the maintenance involved in any UI changes that rely on admin
themes would increase exponentially.

So, -100 for me on this one. If any change was to be made to alignright and
alignleft the only one I would like to see is a more semantic class name.

Lynne
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Eric Marden-2]

On Jun 17, 2009, at 3:34 AM, Lynne Pope wrote:

> Inline styles apply only to the element they are set on. They take
> precedence over everything else in the cascade. Its impossible to  
> style
> pseudo-elements and -classes with inline styles and impossible to  
> override
> them in external CSS.

You can override them with the !important flag, but I wouldn't really  
recommend it unless required.

http://www.w3.org/TR/CSS2/cascade.html#important-rules


- Eric Marden
__________________________________
http://xentek.net/code/wordpress/





_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Simon Wheatley-3]

On Wed, Jun 17, 2009 at 9:03 AM, Eric Marden <wp@...> wrote:

>
> You can override them with the !important flag, but I wouldn't really
> recommend it unless required.
>
>
...and if you think it is required, think again just to check it actually
is. You might be better increasing the specificity of your rules [1].


Ugh, I had to style a plugin (which shall remain nameless) the other week
and it's built in CSS seemingly had !important at the end of every line,
which then infected my CSS (to override it I had to start adding !important
everywhere) and the whole thing ended up looking like a dogs breakfast.
</moaning>

S

[1] http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

---
Sweet Interaction Ltd is Registered in England/Wales, no. 6610741
Registered office: 7 Malton Av, Manchester, M21 8AT
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Lynne Pope]

2009/6/17 Eric Marden <wp@...>

>
> On Jun 17, 2009, at 3:34 AM, Lynne Pope wrote:
>
>  Inline styles apply only to the element they are set on. They take
>> precedence over everything else in the cascade. Its impossible to style
>> pseudo-elements and -classes with inline styles and impossible to override
>> them in external CSS.
>>
>
> You can override them with the !important flag, but I wouldn't really
> recommend it unless required.
>
> http://www.w3.org/TR/CSS2/cascade.html#important-rules

True - I should have said, "impossible to do without messing a lot of other
things up" ;)

The !important modifier does indeed override inline styles - in browsers
that support it. IE6 doesn't and IE7 can't handle it if its used with
elements, eg, I routinely use :
#commentform input[type="submit"], #commentform input[type="reset"]{
styles
}
Any !important modifier used to target HTML elements is ignored by IE7.

Using the modifier also overrides user styles and browser styles, which can
have a serious impact on accessibility.

Like Simon, this is one of my pet peeves about plugins. I strip the CSS from
all plugins that I use and this often results in me having to hack the code,
just to get the plugin to work with my themes. Best practise should be NO
INLINE STYLING!

Lynne
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Eric Marden-2]

On Jun 17, 2009, at 9:59 AM, Lynne Pope wrote:

> NO INLINE STYLING!
>
> Lynne

Amen to then.

- Eric Marden
__________________________________
http://xentek.net/code/wordpress/





_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Matt Freedman]

On Wed, Jun 17, 2009 at 12:34 AM, Lynne Pope <lynne.pope@...> wrote:
> Nope, sorry, disagree. Having it simply as a class allows for easy
> customisation. As it is, alignright and alignleft are styled differently for
> global.css and RTL (where they get swapped around).


I think he meant replace them just in the feeds, so they'll display
correctly in feed readers.


--
Matt Freedman
http://mattfreedman.ca/
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Lynne Pope]

2009/6/18 Matt Freedman <speedboxer@...>

> On Wed, Jun 17, 2009 at 12:34 AM, Lynne Pope <lynne.pope@...> wrote:
> > Nope, sorry, disagree. Having it simply as a class allows for easy
> > customisation. As it is, alignright and alignleft are styled differently
> for
> > global.css and RTL (where they get swapped around).
>
>
> I think he meant replace them just in the feeds, so they'll display
> correctly in feed readers.


The same argument applies - inline styles override user styles.User styles
in this case being the uniform UA implemented by feed aggregators as well as
the end user who may have styled their own reader experience.

Lynne
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Jeremy Clarke]

On Thu, Jun 18, 2009 at 9:26 AM, Lynne Pope<lynne.pope@...> wrote:
> The same argument applies - inline styles override user styles.User styles
> in this case being the uniform UA implemented by feed aggregators as well as
> the end user who may have styled their own reader experience.

I agree on principal with what you're saying, but if only for my
personal curiosity, do you really think that a few key styles will
really break people's style customizations? I mean, in the context of
a blog post .alignright is almost structural for the content. An image
that's .alignright has a very specific semantic relationship with the
paragraph that follows it (e.g. it might say 'the photo to the right'
in the text). I can't help thinking that in these cases having inline
styles for float: and margin-left: (or margin-right:, i just mean
defining the margin opposite the float) not only makes sense but is
almost necessary. Having any kind of complex post layout in a feed
reader is impossible otherwise.

Not saying filtering .alignright into styles for RSS should be in
core, but I think it's a pretty acceptable practice when your content
depends on it (I do it manually on my blog and I haven't recieved any
complaints :P )

--
Jeremy Clarke | http://jeremyclarke.org
Code and Design | http://globalvoicesonline.org
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Lynne Pope]

2009/6/19 Jeremy Clarke <jer@...>

> On Thu, Jun 18, 2009 at 9:26 AM, Lynne Pope<lynne.pope@...> wrote:
> > The same argument applies - inline styles override user styles.User
> styles
> > in this case being the uniform UA implemented by feed aggregators as well
> as
> > the end user who may have styled their own reader experience.
>
> I agree on principal with what you're saying, but if only for my
> personal curiosity, do you really think that a few key styles will
> really break people's style customizations?

Yep, sure do. Inline styles take precedence over user styles (which,
includes browser and feed reader/aggregator application styles - the reason
many feed readers strip inline styling).

In the case of content viewed in a browser, this can have a serious impact
on accessibility.
There are loads of reasons why someone may choose to use their own style
sheet on certain sites (or choose to turn off CSS altogether on some sites)
and I routinely do this myself on some. There are also some sites that I
won't bother visiting at all, beause the styling makes it hard for me to
quickly read the content - for those, I read their feeds. If they styled
their feeds I just wouldn't bother.

And, for me, this has nothing to do with accessibility and everything to do
with usability - there are some really badly designed sites out there that
seem to put design above readability!


> I mean, in the context of
> a blog post .alignright is almost structural for the content. An image
> that's .alignright has a very specific semantic relationship with the
> paragraph that follows it (e.g. it might say 'the photo to the right'
> in the text). I can't help thinking that in these cases having inline
> styles for float: and margin-left: (or margin-right:, i just mean
> defining the margin opposite the float) not only makes sense but is
> almost necessary.


Those two classes aren't semantic. There is nothing about alignright that
says it must align to the right. It's not always aligned or floated to the
right even in WordPress core, which overrides it and flips it around for
sites that use RTL.


> Having any kind of complex post layout in a feed
> reader is impossible otherwise.


The debate about whether to style feeds has arisen many times over the past
few years, in loads of different places outside of WordPress. Generally,
those who say they want it state that they want control over the appearance
of their content and want to add branding. Well, people do have control over
the way their content is displayed - its called a web page and HTML/CSS
makes styling easy.

Feeds,on the other hand, are for syndicating content. Feed readers are not
browsers and feeds were never designed to be read in browsers. Browsers are
designed to recognise feed data and to pass it on to a feed application.

It's also called, "syndication" for a reason - feeds are not designed to be
served to just one end-user. Other sites take feeds, apply their styling,
and display the feed content within their own sites. Any CSS included with
the feed then impacts on the ability for aggregators to display the content.
You don't see Reuters or the New York Times syndicating their styling. It's
all about words.

Not saying filtering .alignright into styles for RSS should be in
> core, but I think it's a pretty acceptable practice when your content
> depends on it (I do it manually on my blog and I haven't recieved any
> complaints :P )


Yeah, well I don't complain or comment on a site that is unusable to me but
I won't subscribe to any feeds that use styling either;) If I want to see
the styling, I will visit the web page

Ok, so that's a personal preference and not everyone shares it, but at least
if the styling is provided by an external XSL sheet, users (and their
reader/aggregator apps) have the option of not using it. Impose styling
through inline styles and users get only two choices - put up with it
(assuming it makes the content accessible to them) or don't read at all.

Lynne
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Jeremy Clarke]

On Thu, Jun 18, 2009 at 8:01 PM, Lynne Pope<lynne.pope@...> wrote:
> And, for me, this has nothing to do with accessibility and everything to do
> with usability - there are some really badly designed sites out there that
> seem to put design above readability!

I doubt any of these problems are caused by aligning photos inside
post text using float: I know the kind of issues you are talking
about, but they are usually caused by bad text formatting choices. I'd
NEVER try to impose my text formatting choices on someone reading an
RSS feed (i hate even doing it with email), but that's a really
different issue from alignment.

>> I mean, in the context of
>> a blog post .alignright is almost structural for the content. An image
>> that's .alignright has a very specific semantic relationship with the
>> paragraph that follows it (e.g. it might say 'the photo to the right'
>> in the text).
>
> Those two classes aren't semantic. There is nothing about alignright that
> says it must align to the right. It's not always aligned or floated to the
> right even in WordPress core, which overrides it and flips it around for
> sites that use RTL.

To be clear, I wasn't saying that .alignright is itself actually a
semantic bit of markup. Rather I was saying that the use of
.alignright inside of a post is more than just a style decision, its a
structural content decision, and thus semantic in the *intent* of the
person using it on a photo . The fact that WP swaps the actual float
for RTL is a perfect example: it is working with the intended semantic
meaning of the right alignment rather than a specific style one.
You're right that there's nothing in class="alignright" that says it
needs to float right, but its still an incredibly useful convention,
and the way the WP post editor presents it is more about post
structure and layout than about style.

On some level I'm just bemoaning the lack of an actual XHTML property
that lets you control alignment, because I think alignment IS a
structural issue within site content. Sure, <center> was a bad idea,
but the fact is that when we are creating mixed-media content (photos,
videos, pullquotes) we naturally want ways to control left and right
alignment. Removing align="left" from html was a good idea because
it's not how you should set up your site's sidebar, but its a shame
because now our posts end up looking like 1995 when they're viewed
using modern tools. I think it's pretty logically sound to say that
right alignment of photos in a blog post is more than a 'style' issue,
it's part of the content of the post. It just happens that CSS 'style'
is the only means of achieving right alignment.

I think if nothing else floating of images deserves a spot as an
exception to the rule against inline styles in posts. I also doubt you
would even notice, let alone be upset or find usability problems with
a  feed that used basic floating and margins on images to make the
layout nicer (unless you get upset on principal, which is valid but
probably not productive ;)



--
Jeremy Clarke
Code and Design | globalvoicesonline.org
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers

[Lynne Pope]

2009/6/19 Jeremy Clarke <jer@...>

> On Thu, Jun 18, 2009 at 8:01 PM, Lynne Pope<lynne.pope@...> wrote:
> > And, for me, this has nothing to do with accessibility and everything to
> do
> > with usability - there are some really badly designed sites out there
> that
> > seem to put design above readability!
>
> I doubt any of these problems are caused by aligning photos inside
> post text using float: I know the kind of issues you are talking
> about, but they are usually caused by bad text formatting choices. I'd
> NEVER try to impose my text formatting choices on someone reading an
> RSS feed (i hate even doing it with email), but that's a really
> different issue from alignment.

I agree that image alignment in feeds is an issue, but its a slippery slope.
The person who wants to align their images also generally wants to format
captions, apply fonts or colours, and generally take over the user
experience ;)

>> I mean, in the context of
> >> a blog post .alignright is almost structural for the content. An image
> >> that's .alignright has a very specific semantic relationship with the
> >> paragraph that follows it (e.g. it might say 'the photo to the right'
> >> in the text).
> >
>
>
> > Those two classes aren't semantic. There is nothing about alignright that
> > says it must align to the right. It's not always aligned or floated to
> the
> > right even in WordPress core, which overrides it and flips it around for
> > sites that use RTL.
>
> To be clear, I wasn't saying that .alignright is itself actually a
> semantic bit of markup. Rather I was saying that the use of
> .alignright inside of a post is more than just a style decision, its a
> structural content decision, and thus semantic in the *intent* of the
> person using it on a photo . The fact that WP swaps the actual float
> for RTL is a perfect example: it is working with the intended semantic
> meaning of the right alignment rather than a specific style one.

I don't want to get into an argument over semantics, but classes that are
purely for presentation/design can only be called semantic, at a stretch, if
they add to the understanding of the content. I see where you are coming
from, but since class="alignright" actually aligns to the left in RTL
themes, and can in fact be made to align almost anywhere, there really isn't
any meaning to it. You could call it
class="completely-nonsemantic-presentational-element" and still use it the
exact same way ;)
I guess it could be argued that its "somewhat" semantic if it does align to
the right. Not convinced though!

On some level I'm just bemoaning the lack of an actual XHTML property

> that lets you control alignment, because I think alignment IS a
> structural issue within site content. Sure, <center> was a bad idea,
> but the fact is that when we are creating mixed-media content (photos,
> videos, pullquotes) we naturally want ways to control left and right
> alignment. Removing align="left" from html was a good idea because
> it's not how you should set up your site's sidebar, but its a shame
> because now our posts end up looking like 1995 when they're viewed
> using modern tools. I think it's pretty logically sound to say that
> right alignment of photos in a blog post is more than a 'style' issue,
> it's part of the content of the post. It just happens that CSS 'style'
> is the only means of achieving right alignment.

Sorry, disagree - its purely presentational. CSS allows styling, and HTML
itself never really controlled this, except by allowing inline styling.
Again, this is styling, not document structure.


> I think if nothing else floating of images deserves a spot as an
> exception to the rule against inline styles in posts. I also doubt you
> would even notice, let alone be upset or find usability problems with
> a  feed that used basic floating and margins on images to make the
> layout nicer (unless you get upset on principal, which is valid but
> probably not productive ;)


Styles have specificity and cascade. A few years back, some feed readers
were caught on the hop when people started applying styles to their feeds.
The result of this was that styled feeds were suddenly imposing their
styling on every subsequent feed in the cascade, when viewed in the reader.
This is not a problem if the reader/aggregator is displaying only one feed
item at a time. It's still a problem for people who display external feed
content on their own sites.

Think about it - if you use "alignright" on your site for content placement
when the site is viewed in a browser, and you import a feed to your site
which also uses "alignright", the feeds styling will override your own CSS
unless you have deliberately added specificity.  .alignright may be styled
to clear floats, adding padding or margins, to apply borders or whatever -
you get no control over this styling if its embedded in inlne styles. If a
site does not float images, and uses a feed that does, can you imagine the
screaming that would ensue?

I send an icon/logo with feeds, and I like seeing these in feeds I subscribe
to. However, RSS is XML for a reason - its pure data format for machines and
its designed to be display agnostic. To me, it becomes less than useful if
styling is applied to individual feeds - might was well go to the web page.
At least then,users get the option to view content with CSS off or go to
print view ;)

But that's just me. I've unsubscribed to feeds that have forced styling on
me, and the minute a feed throws in an image that is not meaningful to
content, they are deleted from my subscriptions. Your mileage may vary ;)

Lynne
_______________________________________________
wp-hackers mailing list
wp-hackers@...
http://lists.automattic.com/mailman/listinfo/wp-hackers