Re: [css3-writing-modes] before/after terminology alternative?

Sylvain Galineau <sylvaing@microsoft.com> wrote on 2012/10/05 4:19:57
> 
> ["Martin J. Dürst":]
> > 
> > Just an additional datapoint in this discussion:
> > 
> > I just noticed that CSS already has properties page-break-before and page-
> > break-after (see http://www.w3.org/TR/CSS2/page.html#page-break-props).
> > Rather obviously, these indicate the same directions as the -before and -
> > after relative direction properties already in XSL-FO, but are orthogonal
> > to the :before and :after pseudo-elements.
> > 
> > These seem not to have caused any significant confusion up to now.
> 
> That it does not seem to have caused confusion may mostly reflect that one
> is much better known than the other.
> 
> Also, when preceded and qualified with the word 'page' I don't see how they 
> could be confusing. As stand-alone directional words before and after are 
> imo potentially confusing for anyone familiar with ::before/::after which is
> to say a very large proportion of CSS authors. 


I'd like to repeat this[1] - 
	I don't think the logical direction before/after conflicts 
	with existing CSS specification, the pseudo elements ::before and ::after.
	The pseudo elements ::before and ::after are for 
	"before the element's content" and "after the element's content" 
	in the DOM tree, and do not mean directions in layout.
	People can easily distinguish them.

[1] http://lists.w3.org/Archives/Public/www-style/2012Sep/0385.html

In addition, I understand that if the actual directions of ::before/::after
pseudo elements are always orthogonal to the before/after logical 
directions, people will be confused easily, but this is not true;
when the ::before/::after pseudo elements have 'display: block' or 
the target elements have block content, the directions are same as 
before/after logical directions. Consider the following example:

	<style>
	h1::before {
	  display: block;
	  content: "[BEFORE]";
	}
	h1::after {
	  display: block;
	  content: "[AFTER]";
	}
	</style>
	<h1>TEST</h1>

The result will be:

	[BEFORE]
	TEST
	[AFTER]

Regards,

Shinyu Murakami
Antenna House