Asp Forum - Parse CSS styles and swap background position value

Cezary Tomczyk

1/31/2015 6:40:00 PM

Here is a sample of CSS (the properties are repeated, but this is just for example to test regular expression):

h1 { float: left; }

..example1 { background: #fff url(p.png) no-repeat right top; cursor: ne-resize; border-left: 10px; border-right: 5px; float: right; height: 100%; margin: 0 50px 0 0; padding: 0px 20px 0 0; padding-left: 15px; width: 50%; padding-right: 5px; margin-left: 15px; width: 50%; margin-right: 5px; }

..example2 {
padding: 1px 2px 3px 4px;
margin-right: 3em;
background-position: 5% 80%;
background: url(test.gif);
cursor: ne-resize;
border-left: 1px;
background: url(example1.png) repeat-x right 50%;
background: #ffffff url("example2.png") no-repeat fixed 0% top;
background: white url("example3.png") repeat fixed left;
background: #333 url("example4.png") 0 50%;
}

My goal is to find all "background" properties and then swap horizontal position value from left to right or right to left or value% to (100% - value%).

I've started from (background\s*:\s*)(.*); regular expression. However, background property might have a very different values here. I know that it does not matter if one of the property values is missing, as long as the ones that are present are in this order:

* background-color
* background-image
* background-repeat
* background-attachment
* background-position

I've been thinking maybe I'll end up with overcomplicated regular expression here.

Any suggestions how it can be done in simpler way?

Here is the site where I play with regular expressions: https://www.regex101.com/...

--
Cezary Tomczyk
http://www.ct...

11 Answers

Erwin Moller

2/2/2015 12:10:00 PM

On 1/31/2015 7:39 PM, Cezary Tomczyk wrote:
> Here is a sample of CSS (the properties are repeated, but this is just for example to test regular expression):
>
> h1 { float: left; }
>
> .example1 { background: #fff url(p.png) no-repeat right top; cursor: ne-resize; border-left: 10px; border-right: 5px; float: right; height: 100%; margin: 0 50px 0 0; padding: 0px 20px 0 0; padding-left: 15px; width: 50%; padding-right: 5px; margin-left: 15px; width: 50%; margin-right: 5px; }
>
> .example2 {
> padding: 1px 2px 3px 4px;
> margin-right: 3em;
> background-position: 5% 80%;
> background: url(test.gif);
> cursor: ne-resize;
> border-left: 1px;
> background: url(example1.png) repeat-x right 50%;
> background: #ffffff url("example2.png") no-repeat fixed 0% top;
> background: white url("example3.png") repeat fixed left;
> background: #333 url("example4.png") 0 50%;
> }
>
> My goal is to find all "background" properties and then swap horizontal position value from left to right or right to left or value% to (100% - value%).
>
> I've started from (background\s*:\s*)(.*); regular expression. However, background property might have a very different values here. I know that it does not matter if one of the property values is missing, as long as the ones that are present are in this order:
>
> * background-color
> * background-image
> * background-repeat
> * background-attachment
> * background-position
>
> I've been thinking maybe I'll end up with overcomplicated regular expression here.
>
> Any suggestions how it can be done in simpler way?
>
> Here is the site where I play with regular expressions: https://www.regex101.com/...
>

Sounds pretty difficult with regex only.
I would load the file into a programming language of your choice (eg
PHP, Phyton, etc) and fix the CSS from there.

For example:
- Make a single item of each separate declaration. (they end with ";")
Maybe use split on ";" but also make sure you take the opening "{"
into account.
- trim any spaces/tabs on the left side.
- Check if that item starts with "background" or "background-*:" where
"*" can be anything up to the next ":". (You can use a regex for this
part of course)
- if so: do something with the rest (eg replacing "left" with "right").
- reassemble all the parts into your new css.

I think that covers all appearances.

Regards,
Erwin Moller

--
"That which can be asserted without evidence, can be dismissed without
evidence."
-- Christopher Hitchens

Thomas 'PointedEars' Lahn

2/2/2015 1:02:00 PM

Erwin Moller wrote:

> On 1/31/2015 7:39 PM, Cezary Tomczyk wrote:
>> Here is a sample of CSS (the properties are repeated, but this is just
>> for example to test regular expression):
>> [â?¦]
>> My goal is to find all "background" properties and then swap horizontal
>> position value from left to right or right to left or value% to (100% -
>> value%).
>> [â?¦]
>> Here is the site where I play with regular expressions:
>> https://www.regex101.com/...
>
> Sounds pretty difficult with regex only.

It is provably *impossible* to parse (a) CSS(-like language) with only one
application of one *regular* expression. As most languages to be parsed,
this one, too, is _not_ regular. (See: Chomsky hierarchy, pumping lemma for
regular languages.)

It is provably possible with several regular expressions as part of an
implementation of a push-down automaton. In the simplest case:

var
match,
rx = /â?¦|â?¦/g;

while ((match = rx.exec(code))
{
/* â?¦ */
}

(This does not suffice here because the first, *longest* match must win, and
with alternation the first matching alternative always wins. I have been
working on a general parser implementation that is capable, but it is not
production-ready yet.)

> I would load the file into a programming language of your choice (eg
> PHP, Phyton, etc) and fix the CSS from there.

Itâ??s _Python_. But I do not see what difference that would make, unless
there is a CSS library in either language that I am not aware of. Recursive
regular expressions which are supported by Python and PCRE as supported by
PHP can only get you that far.

This appears to me to be a use-case for LESS or another CSS generator. Use
them to have variables and more functions in your stylesheet, then use
client-side script only to switch the class of a context element.

Or do not parse the stylesheet at all, but find the selectors that apply in
the document.styleSheets NodeList and modify the property values there.

> For example:
> - Make a single item of each separate declaration. (they end with ";")
> Maybe use split on ";" but also make sure you take the opening "{"
> into account.

@media only screen and (max-width: 474px) {
.foo:after {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: "BTDT; and you?";
}
}

> - trim any spaces/tabs on the left side.
> - Check if that item starts with "background" or "background-*:" where
> "*" can be anything up to the next ":". (You can use a regex for this
> part of course)
> - if so: do something with the rest (eg replacing "left" with "right").
> - reassemble all the parts into your new css.

You can do that, but again it will not work with a single expression,
because parantheses can be nested in the property value, namely

background-image: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

(a linear gradient with either top black to bottom white or top opaque black
to bottom transparent black, depending on which is supported last) is Valid
CSS3 (and think about prefixes).

> I think that covers all appearances.

It does not, of course. See the CSS 2.1 grammar to begin with.

The used parser would have to recognize, in top-down order: media queries,
rulesets, declarations, property names, and property values, in order to do
something useful with property values. (And probably I have forgotten
something else.) It is not logical to rebuild a CSS parser when simpler
measures would suffice.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Erwin Moller

2/2/2015 1:40:00 PM

On 2/2/2015 2:01 PM, Thomas 'PointedEars' Lahn wrote:
> Erwin Moller wrote:
>
>> On 1/31/2015 7:39 PM, Cezary Tomczyk wrote:
>>> Here is a sample of CSS (the properties are repeated, but this is just
>>> for example to test regular expression):
>>> [â?¦]
>>> My goal is to find all "background" properties and then swap horizontal
>>> position value from left to right or right to left or value% to (100% -
>>> value%).
>>> [â?¦]
>>> Here is the site where I play with regular expressions:
>>> https://www.regex101.com/...
>>
>> Sounds pretty difficult with regex only.
>
> It is provably *impossible* to parse (a) CSS(-like language) with only one
> application of one *regular* expression. As most languages to be parsed,
> this one, too, is _not_ regular. (See: Chomsky hierarchy, pumping lemma for
> regular languages.)
>
> It is provably possible with several regular expressions as part of an
> implementation of a push-down automaton. In the simplest case:
>
> var
> match,
> rx = /â?¦|â?¦/g;
>
> while ((match = rx.exec(code))
> {
> /* â?¦ */
> }
>
> (This does not suffice here because the first, *longest* match must win, and
> with alternation the first matching alternative always wins. I have been
> working on a general parser implementation that is capable, but it is not
> production-ready yet.)

OK.

>
>> I would load the file into a programming language of your choice (eg
>> PHP, Phyton, etc) and fix the CSS from there.
>
> Itâ??s _Python_.

What's wrong with Fyton? :-)
Sorry, that was a typo (a typo I cannot get out of fingers/system, much
to my embarrassment.).

But I do not see what difference that would make, unless
> there is a CSS library in either language that I am not aware of. Recursive
> regular expressions which are supported by Python and PCRE as supported by
> PHP can only get you that far.

I wasn't suggesting a helper-CCS library at all.
My suggestion was to just find the declarations which mention
"background" or "background-*".

>
> This appears to me to be a use-case for LESS or another CSS generator. Use
> them to have variables and more functions in your stylesheet, then use
> client-side script only to switch the class of a context element.

OK.

>
> Or do not parse the stylesheet at all, but find the selectors that apply in
> the document.styleSheets NodeList and modify the property values there.

That would be a fix at client-side of the CSS then. I am not sure I like
that idea (load on the client while the right CSS would suffice.).

>
>> For example:
>> - Make a single item of each separate declaration. (they end with ";")
>> Maybe use split on ";" but also make sure you take the opening "{"
>> into account.
>
> @media only screen and (max-width: 474px) {
> .foo:after {
> display: block;
> position: absolute;
> left: 0;
> top: 0;
> right: 0;
> bottom: 0;
> content: "BTDT; and you?";

(Not as often as you, I expect.)

> }
> }
>

I see where you are heading: using ; in the content.

Yes, that would make my (not posted) algorithm fail horribly.
I stand corrected.

>> - trim any spaces/tabs on the left side.
>> - Check if that item starts with "background" or "background-*:" where
>> "*" can be anything up to the next ":". (You can use a regex for this
>> part of course)
>> - if so: do something with the rest (eg replacing "left" with "right").
>> - reassemble all the parts into your new css.
>
> You can do that, but again it will not work with a single expression,
> because parantheses can be nested in the property value, namely
>
> background-image: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
> background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
>
> (a linear gradient with either top black to bottom white or top opaque black
> to bottom transparent black, depending on which is supported last) is Valid
> CSS3 (and think about prefixes).
>
>> I think that covers all appearances.
>
> It does not, of course. See the CSS 2.1 grammar to begin with.
>
> The used parser would have to recognize, in top-down order: media queries,
> rulesets, declarations, property names, and property values, in order to do
> something useful with property values. (And probably I have forgotten
> something else.)

AAARGH, please stop!

You convinced me completely.

It is not logical to rebuild a CSS parser when simpler
> measures would suffice.
>

I am not familiar with Chomsky hierarchy, but after reading your post I
think I should. I have the feeling I wouldn't have posted my first
suggestion if I did know about Chomsky hierarchy.

Thanks for the explanation.
And good luck to OP fixing the CSS in another way.

Regards,
Erwin Moller

--
"That which can be asserted without evidence, can be dismissed without
evidence."
-- Christopher Hitchens

Thomas 'PointedEars' Lahn

2/2/2015 5:17:00 PM

Erwin Moller wrote:

> On 2/2/2015 2:01 PM, Thomas 'PointedEars' Lahn wrote:
>> Erwin Moller wrote:
>>> On 1/31/2015 7:39 PM, Cezary Tomczyk wrote:
>>>> Here is a sample of CSS (the properties are repeated, but this is just
>>>> for example to test regular expression):
>>>> [â?¦]
>>>> My goal is to find all "background" properties and then swap horizontal
>>>> position value from left to right or right to left or value% to (100% -
>>>> value%).
>>>> [â?¦]
>>>> Here is the site where I play with regular expressions:
>>>> https://www.regex101.com/...
>>> [â?¦]
>>> I would load the file into a programming language of your choice (eg
>>> PHP, Phyton, etc) and fix the CSS from there.
>> [â?¦]
>> But I do not see what difference that would make, unless
>> there is a CSS library in either language that I am not aware of.
>> Recursive regular expressions which are supported by Python and PCRE as
>> supported by PHP can only get you that far.
>
> I wasn't suggesting a helper-CCS library at all.
> My suggestion was to just find the declarations which mention
> "background" or "background-*".

What exactly did you have in mind, then?

>> Or do not parse the stylesheet at all, but find the selectors that apply
>> in the document.styleSheets NodeList and modify the property values
>> there.
>
> That would be a fix at client-side of the CSS then. I am not sure I like
> that idea (load on the client while the right CSS would suffice.).

It is not my preferred approach either, although I have written ECMAScript-
conforming code that allows one to access rules in the CSSOM by selector to
make that easy. I find the OPâ??s problem description sufficiently imprecise
to give a good recommendation as to the best approach.

> I see where you are heading: using ; in the content.
>
> Yes, that would make my (not posted) algorithm fail horribly.
> I stand corrected.
>
>>> I think that covers all appearances.
>>
>> It does not, of course. See the CSS 2.1 grammar to begin with.
>>
>> The used parser would have to recognize, in top-down order: media
>> queries, rulesets, declarations, property names, and property values, in
>> order to do
>> something useful with property values. (And probably I have forgotten
>> something else.)
>
> AAARGH, please stop!
>
> You convinced me completely.

Now that I have given sufficient warning for the *general* case ;-),
I should point out that, because of the restrictions in the CSS3 module
specifications for background property values *so far*, this is a *special*
case where you could find the pertinent declarations, and tell apart the
property names and value *without* a full-blown CSS parser, under the
following conditions:

- Every background property declaration (even the last one in a ruleset,
where it is optional) is terminated with a semicolon (otherwise, newlines
complicate everything);

- Property values do not contain semicolons (there is the syntactical
possibility for semicolons in â??dataâ? URIs for the â??background-imageâ?
property value or â??backgroundâ? property value component, for example);

- Property values do not contain substrings that match a â??backgroundâ?
or â??background-positionâ? property declaration.

And then I am rather certain (also tested positive on the example code) that
you can use

/\bbackground(-position)?\s*:\s*([^;]+)\s*;/gi

for matching.

Still, the difficulty here is to tell apart the parts of the property value
for exchanging their value ("$2"). Again, *iff* you can make sure that
*all* percentages in the matched property values relate to horizontal
background-position (which usually is _not_ the case: they can also be
something that precedes a URI-encoded value for the background image; a
radius, position or color stop of a gradient; the background size, or an
RGB[A]/HSL[A] background color component, or the vertical background-
position â?? did I miss anything?), then you could use

â?¦ = value.replace(/\b(?:(left)|(right)|(\d+)%)\b/gi,
function (match, left, right, percentage) {
return (left
? "right"
: (right ? "left" : (100 - percentage) + "%")));
});

But this does not work already in the case of

background: url(example1.png) repeat-x right 50%;

And the â??rightâ? value can be anywhere in the property value:

<http://www.w3.org/TR/css3-background/#ltbg-l...

Specifically, you have to exclude the cases where you found a percentage and
either â??leftâ? or â??rightâ? (in any order) because that percentage, in the
aforementioned context, refers to the *vertical* position instead.

As is obvious now, even though it is generally possible to use regular
expressions in this case, many conditions have to be met in order to make it
possible.

It is a lot easier to use the CSSOM instead (document.styleSheets, the
return value of document.defaultView.getComputedStyle(â?¦), or the â??styleâ?
property): there you have the rulesets and declarations already parsed, and
can access the â??backgroundPositionâ? or â??backgroundPositionXâ? property value
directly where it should always be retrievable in percentages.

>> It is not logical to rebuild a CSS parser when simpler
>> measures would suffice.
>
> I am not familiar with Chomsky hierarchy, but after reading your post
> I think I should. I have the feeling I wouldn't have posted my first
> suggestion if I did know about Chomsky hierarchy.

At least not in *that* way, for sure.

> Thanks for the explanation.

Youâ??re welcome.

> And good luck to OP fixing the CSS in another way.

ACK.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Cezary Tomczyk

2/3/2015 9:59:00 AM

On Monday, February 2, 2015 at 6:18:05 PM UTC+1, Thomas 'PointedEars' Lahn wrote:
[...]

> Now that I have given sufficient warning for the *general* case ;-),
> I should point out that, because of the restrictions in the CSS3 module
> specifications for background property values *so far*, this is a *special*
> case where you could find the pertinent declarations, and tell apart the
> property names and value *without* a full-blown CSS parser, under the
> following conditions:
>
> - Every background property declaration (even the last one in a ruleset,
> where it is optional) is terminated with a semicolon (otherwise, newlines
> complicate everything);
>
> - Property values do not contain semicolons (there is the syntactical
> possibility for semicolons in "data" URIs for the "background-image"
> property value or "background" property value component, for example);
>
> - Property values do not contain substrings that match a "background"
> or "background-position" property declaration.
>
> And then I am rather certain (also tested positive on the example code) that
> you can use
>
> /\bbackground(-position)?\s*:\s*([^;]+)\s*;/gi
>
> for matching.

I was very close to that regular expression :-) Anyway, that one helped me. Thanks.

> Still, the difficulty here is to tell apart the parts of the property value
> for exchanging their value ("$2"). Again, *iff* you can make sure that
> *all* percentages in the matched property values relate to horizontal
> background-position (which usually is _not_ the case: they can also be
> something that precedes a URI-encoded value for the background image; a
> radius, position or color stop of a gradient; the background size, or an
> RGB[A]/HSL[A] background color component, or the vertical background-
> position - did I miss anything?), then you could use
>
> ... = value.replace(/\b(?:(left)|(right)|(\d+)%)\b/gi,
> function (match, left, right, percentage) {
> return (left
> ? "right"
> : (right ? "left" : (100 - percentage) + "%")));
> });
>
> But this does not work already in the case of
>
> background: url(example1.png) repeat-x right 50%;
>
> And the "right" value can be anywhere in the property value:
>
> <http://www.w3.org/TR/css3-background/#ltbg-l...
>
> Specifically, you have to exclude the cases where you found a percentage and
> either "left" or "right" (in any order) because that percentage, in the
> aforementioned context, refers to the *vertical* position instead.

That's true. Having values anywhere in property brings complexity for parsing.

> As is obvious now, even though it is generally possible to use regular
> expressions in this case, many conditions have to be met in order to make it
> possible.

That's all true what You wrote.

However, I am going to do it starting from basic level. I mean, I will assume that position values will be always at the end of the background property. This indicates some discipline in CSS, but it will work. As a basic step it should be sufficient. Later I will extend parsing to be more flexible.

> It is a lot easier to use the CSSOM instead (document.styleSheets, the
> return value of document.defaultView.getComputedStyle(...), or the "style"
> property): there you have the rulesets and declarations already parsed, and
> can access the "backgroundPosition" or "backgroundPositionX" property value
> directly where it should always be retrievable in percentages.
[...]

I agree, it's a lot of easier to use the CSSOM instead, but there are several reasons that doesn't allow me to do that in that way.

1. Processing of the CSS file will be done in NodeJS. This means that there is no way to use CSSOM there in the way as browser is using it.

2. I want to keep processed version in the same format as original version for better debugging purpose.

3. I've used PhantomJS to get all CSS properties/values from CSSOM and it works. However, I can get all necessary details but then again I need to build new CSS so that it will look as original file. I think the solution here might become too complex.

Because of all these reasons I think that at basic level I can just parse CSS and use regular expressions to do the changes. Later the solution could be improved, I think.

Thank You for above suggestions described in Your response.

--
Cezary Tomczyk
http://www.ct...

Evertjan.

2/3/2015 10:39:00 AM

Cezary Tomczyk <cezary.tomczyk@gmail.com> wrote on 03 feb 2015 in
comp.lang.javascript:

> was very close to that regular expression :-)

alert( ':-);-):-);-)'.replace(/((:|;)-\))/g,'$1$1$1') );

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Thomas 'PointedEars' Lahn

2/3/2015 11:45:00 AM

Thomas 'PointedEars' Lahn wrote:

> [â?¦] Again, *iff* you can make sure that *all* percentages in the matched
> property values relate to horizontal background-position (which usually is
> _not_ the case: [â?¦]), then you could use
>
> â?¦ = value.replace(/\b(?:(left)|(right)|(\d+)%)\b/gi,
> function (match, left, right, percentage) {
> return (left
> ? "right"
> : (right ? "left" : (100 - percentage) + "%")));
^
> });
>
> But this does not work already in the case of
>
> background: url(example1.png) repeat-x right 50%;

Bad example :) It would work here (after the extra parenthesis was
removed), but only because of 100 â?? 50 = 50.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Thomas 'PointedEars' Lahn

2/3/2015 2:38:00 PM

Cezary Tomczyk wrote:

> On Monday, February 2, 2015 at 6:18:05 PM UTC+1, Thomas 'PointedEars' Lahn
> wrote:
> [...]
> However, I am going to do it starting from basic level. I mean, I will
> assume that position values will be always at the end of the background
> property.

Even if so, which coordinate, if any, comes first, is determined by the
components of the value.

background: â?¦ right 50%;

is equivalent to

background-: â?¦ 100% 50%;

and

background: â?¦ 50% top;

is equivalent to

background: â?¦ 50% 0%;

which is equivalent to

background: â?¦ center top;

and

background: â?¦ top;

Finally, the initial value is â??0% 0%â? which is equivalent to â??left topâ?.
That is, in order to exchange left-aligned for right-aligned background-
position, you have to set â??100% 0%â? if you find background-image but not any
â??background-positionâ? values in the ruleset *or* rulesets that match the
same elements. For that you need a ruleset parser (to consider only the
last valid declaration), and to find the rulesets to pass to that parser you
need a full CSS parser (so as not to mistake media queries for them).

<http://www.w3.org/TR/css3-background/#background-po...

>> It is a lot easier to use the CSSOM instead (document.styleSheets, the
>> return value of document.defaultView.getComputedStyle(...), or the
>> "style" property): there you have the rulesets and declarations already
>> parsed, and can access the "backgroundPosition" or "backgroundPositionX"
>> property value directly where it should always be retrievable in
>> percentages.
> [...]
>
> I agree, it's a lot of easier to use the CSSOM instead, but there are
> several reasons that doesn't allow me to do that in that way.
>
> 1. Processing of the CSS file will be done in NodeJS. This means that
> there is no way to use CSSOM there in the way as browser is using it.

Doubtful given PhantomJS.

> 2. I want to keep processed version in the same format as original version
> for better debugging purpose.
>
> 3. I've used PhantomJS to get all CSS properties/values from CSSOM and it
> works. However, I can get all necessary details but then again I need to
> build new CSS so that it will look as original file. I think the solution
> here might become too complex.

While it is rather simple to retrieve the CSS code from a CSS stylesheet
object in the CSSOM â??

[].map.call(
document.styleSheets[0].cssRules,
function (rule) {
return rule.cssText;
}).join("\n")

â?? the result does not need to look like the original stylesheet indeed.
In particular, the retrieved values are the computed ones.

But why would that matter? What is your use-case?

> Because of all these reasons I think that at basic level I can just parse
> CSS and use regular expressions to do the changes.

If you have a CSS parser. Otherwise the probability is greater than zero
that you break the code this way or that the result is inconsistent.

> Later the solution could be improved, I think.

Improved solutions will become increasingly similar to a CSS parser. BTDT.

> Thank You for above suggestions described in Your response.

You are welcome.

(Even the polite form of â??youâ?? â?? which I suppose is what you wanted to
convey â?? is not written with a â??Yâ? in modern English, except at the start of
a sentence. See also
<http://english.stackexchange.com/questions/30185/you-versus-you-as-polite-form-of-w.... Contrast that with â??Iâ? which is always written with a
capital letter.)

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Cezary Tomczyk

2/4/2015 7:56:00 AM

On 2015-02-03 15:37, Thomas 'PointedEars' Lahn wrote:
> Cezary Tomczyk wrote:
>
>> On Monday, February 2, 2015 at 6:18:05 PM UTC+1, Thomas
>> 'PointedEars' Lahn wrote: [...] However, I am going to do it
>> starting from basic level. I mean, I will assume that position
>> values will be always at the end of the background property.
>
> Even if so, which coordinate, if any, comes first, is determined by
> the components of the value.
>
> background: â?¦ right 50%;
>
> is equivalent to
>
> background-: â?¦ 100% 50%;
>
> and
>
> background: â?¦ 50% top;
>
> is equivalent to
>
> background: â?¦ 50% 0%;
>
> which is equivalent to
>
> background: â?¦ center top;
>
> and
>
> background: â?¦ top;
>
> Finally, the initial value is â??0% 0%â? which is equivalent to â??left
> topâ?. That is, in order to exchange left-aligned for right-aligned
> background- position, you have to set â??100% 0%â? if you find
> background-image but not any â??background-positionâ? values in the
> ruleset *or* rulesets that match the same elements. For that you
> need a ruleset parser (to consider only the last valid declaration),
> and to find the rulesets to pass to that parser you need a full CSS
> parser (so as not to mistake media queries for them).
>
> <http://www.w3.org/TR/css3-background/#background-po...

I see. More explanation below.

>>> It is a lot easier to use the CSSOM instead
>>> (document.styleSheets, the return value of
>>> document.defaultView.getComputedStyle(...), or the "style"
>>> property): there you have the rulesets and declarations already
>>> parsed, and can access the "backgroundPosition" or
>>> "backgroundPositionX" property value directly where it should
>>> always be retrievable in percentages.
>> [...]
>>
>> I agree, it's a lot of easier to use the CSSOM instead, but there
>> are several reasons that doesn't allow me to do that in that way.
>>
>> 1. Processing of the CSS file will be done in NodeJS. This means
>> that there is no way to use CSSOM there in the way as browser is
>> using it.
>
> Doubtful given PhantomJS.

I've tested yesterday and it works. PhantomJS is fine and I can get all
necessary data using
https://developer.mozilla.org/en-US/docs/Web/API/document.s....

>> 2. I want to keep processed version in the same format as original
>> version for better debugging purpose.
>>
>> 3. I've used PhantomJS to get all CSS properties/values from CSSOM
>> and it works. However, I can get all necessary details but then
>> again I need to build new CSS so that it will look as original
>> file. I think the solution here might become too complex.
>
> While it is rather simple to retrieve the CSS code from a CSS
> stylesheet object in the CSSOM â??
>
> [].map.call( document.styleSheets[0].cssRules, function (rule) {
> return rule.cssText; }).join("\n")
>
> â?? the result does not need to look like the original stylesheet
> indeed. In particular, the retrieved values are the computed ones.
>
> But why would that matter? What is your use-case?

Well, I was thinking about debugging later. Same style sheets might help
me to debugging bugs later. But... after all I think this is over
thinking from my side.

I think better idea is to use PhantomJS to retrieve the CSS code from a
CSS stylesheet object in the CSSOM and then before every changed
selector add simple html[dir='rtl'].

Example: LTR version will look

..sidebar {
float: left;
}

and after processing RTL will look:

html[dir='rtl']
..sidebar {
float: left;
}

The <html> HTML element need to have set "dir" attribute to proper value.

Yes, leaving parsing for the browser and get all details from browser is
much easier and safer than using regular expressions. Plus, there will
be less maintenance of code.

>> Because of all these reasons I think that at basic level I can just
>> parse CSS and use regular expressions to do the changes.
>
> If you have a CSS parser. Otherwise the probability is greater than
> zero that you break the code this way or that the result is
> inconsistent.
>
>> Later the solution could be improved, I think.
>
> Improved solutions will become increasingly similar to a CSS parser.
> BTDT.

It's so true. I was afraid about that. This would probably lead me into
very complex direction.

After all considerations I decided to use PhantomJS to do the job.

> (Even the polite form of â??youâ?? â?? which I suppose is what you wanted
> to convey â?? is not written with a â??Yâ? in modern English, except at
> the start of a sentence. See also
> <http://english.stackexchange.com/questions/30185/you-versus-you-as-polite-form-of-w....
> Contrast that with â??Iâ? which is always written with a capital
> letter.)

Thanks for that note. However, some software just automatically convert
"you" to "You" ;-)

--
Cezary Tomczyk
http://www.ct...

John Harris

2/4/2015 3:09:00 PM

On Tue, 03 Feb 2015 15:37:31 +0100, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

<snip>
>(Even the polite form of ?you? ? which I suppose is what you wanted to
<snip>

English does not use upside down quote symbols.

John

comp.lang.javascript

Parse CSS styles and swap background position value

Cezary Tomczyk

Erwin Moller

Thomas 'PointedEars' Lahn

Erwin Moller

Thomas 'PointedEars' Lahn

Cezary Tomczyk

Evertjan.

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Cezary Tomczyk

John Harris

x Login to ForumsZone