Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28608 > unrolled thread

Change font size in multiple classes

Back to article view | Back to comp.lang.javascript

Contents

  Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-03 13:55 +1000
    Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 10:09 +0200
    Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 10:51 +0200
      Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-03 20:39 +1000
        Re: Change font size in multiple classes Jake Jarvis <pig_in_shoes@yahoo.com> - 2015-09-03 16:20 +0200
          Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 16:27 +0200
            Re: Change font size in multiple classes Jake Jarvis <pig_in_shoes@yahoo.com> - 2015-09-03 16:30 +0200
              Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 16:39 +0200
                Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-04 15:49 +1000
                  Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-04 09:37 +0200
                    Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-04 18:11 +1000
                  Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-07 03:33 +0200
        Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 16:24 +0200
    Re: Change font size in multiple classes Dr J R Stockton <reply1500@merlyn.demon.co.uk.invalid> - 2015-09-05 20:49 +0100
      Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-06 19:30 +1000
        Re: Change font size in multiple classes Dr J R Stockton <reply1500@merlyn.demon.co.uk.invalid> - 2015-09-07 20:27 +0100
    Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-06 14:07 +0200
      Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-07 09:53 +1000
        Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-07 20:35 +0200
          Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-08 14:18 +1000
            Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-09 04:51 +0200

Page 1 of 2  [1] 2  Next page →

#28608 — Change font size in multiple classes

A 3rd party elearning app that the client is using publishes to HTML. 
The client wants me to add a button that will allow the user to 
increase/decrease the font size.

When I look at the publish source I note that every piece of text is 
wrapped in a SPAN which has a class attribute.

Within the HTML there's a STYLE element with a selector for every SPAN 
which typical look like

span.text45Font1 {
   font-size:13px;
   font-family:"Arial", sans-serif; color:#010101;
}

where the selector is, I think, always of the form
   "span.text" + number + "Font" + number

I'm not sure whether I should

- find all the "span.text" selectors
- find and modify the font-size selector

or

- find all the SPAN elements
- get and modify the font size directly

Is one way "better" than the other or is there another way to do this?

Andrew Poulos

[toc] | [next] | [standalone]

#28610

ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in 
comp.lang.javascript:

> document.body.style.fontsize

document.body.style.fontSize

the - translates to a capital letter.

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

[toc] | [prev] | [next] | [standalone]

#28611

ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in 
comp.lang.javascript:

> Andrew Poulos <ap_prog@hotmail.com> writes:
>>Is one way "better" than the other or is there another way to do this?
> 
>   Maybe you can use a JavaScript element right behind the
>   style element to convert all the px values into em values
>   (only once, when the page is loaded). When no contents has
>   been displayed yet, this should be faster than when it is
>   done later.

Works fine, start with:

body {font-size:62.5%;} // <http://pxtoem.com/>

and

temp = document.getElementsByTagName('*');
for (el in temp) 
  if (temp[el].style && temp[el].style.fontSize)
    temp[el].style.fontSize = 
      temp[el].style.fontSize.replace(/(\d)px/,'.$1em');

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

[toc] | [prev] | [next] | [standalone]

#28612

On 3/09/2015 6:51 PM, Evertjan. wrote:
> ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
> comp.lang.javascript:
>
>> Andrew Poulos <ap_prog@hotmail.com> writes:
>>> Is one way "better" than the other or is there another way to do this?
>>
>>    Maybe you can use a JavaScript element right behind the
>>    style element to convert all the px values into em values
>>    (only once, when the page is loaded). When no contents has
>>    been displayed yet, this should be faster than when it is
>>    done later.
>
> Works fine, start with:
>
> body {font-size:62.5%;} // <http://pxtoem.com/>
>
> and
>
> temp = document.getElementsByTagName('*');
> for (el in temp)
>    if (temp[el].style && temp[el].style.fontSize)
>      temp[el].style.fontSize =
>        temp[el].style.fontSize.replace(/(\d)px/,'.$1em');
>

I'm having a little trouble getting it to work (but thanks for the way 
forward). So far I've changed
   temp = document.getElementsByTagName('*');
to
   temp = document.body.getElementsByTagName('*');

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#28613

Am 03.09.2015 um 12:39 schrieb Andrew Poulos:
> On 3/09/2015 6:51 PM, Evertjan. wrote:
>> ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
>> comp.lang.javascript:
>>
>>> Andrew Poulos <ap_prog@hotmail.com> writes:
>>>> Is one way "better" than the other or is there another way to do this?
>>>
>>>    Maybe you can use a JavaScript element right behind the
>>>    style element to convert all the px values into em values
>>>    (only once, when the page is loaded). When no contents has
>>>    been displayed yet, this should be faster than when it is
>>>    done later.
>>
>> Works fine, start with:
>>
>> body {font-size:62.5%;} // <http://pxtoem.com/>
>>
>> and
>>
>> temp = document.getElementsByTagName('*');
>> for (el in temp)
>>    if (temp[el].style && temp[el].style.fontSize)
>>      temp[el].style.fontSize =
>>        temp[el].style.fontSize.replace(/(\d)px/,'.$1em');
>>
>
> I'm having a little trouble getting it to work (but thanks for the way
> forward). So far I've changed
>    temp = document.getElementsByTagName('*');
> to
>    temp = document.body.getElementsByTagName('*');
>

That style property reflects *inline* styles.



Take a look at the _DOM Level 2 Style Specification_ (and MSDN for 
compatibility, they used to have a different API).

// modify that one
var style = document.styleSheets[x].cssRules[y].style;

[toc] | [prev] | [next] | [standalone]

#28615

Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in 
comp.lang.javascript:


>>    temp = document.getElementsByTagName('*');

[etc]

> That style property reflects *inline* styles.

Yes, because that was the OQ asked by the OP.

> Take a look at the _DOM Level 2 Style Specification_ (and MSDN for 
> compatibility, they used to have a different API).

Perhaps first get my method working and understood?

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

[toc] | [prev] | [next] | [standalone]

#28616

Am 03.09.2015 um 16:27 schrieb Evertjan.:
> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in
> comp.lang.javascript:
>
>
>>>     temp = document.getElementsByTagName('*');
>
> [etc]
>
>> That style property reflects *inline* styles.
>
> Yes, because that was the OQ asked by the OP.
>

What?
No ...

>> Take a look at the _DOM Level 2 Style Specification_ (and MSDN for
>> compatibility, they used to have a different API).
>
> Perhaps first get my method working and understood?
>

[toc] | [prev] | [next] | [standalone]

#28617

Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in 
comp.lang.javascript:

>>> That style property reflects *inline* styles.
>>
>> Yes, because that was the OQ asked by the OP.
>>
> 
> What?
> No ...

Indeed, Andrew said 'class attribute', my mistake:

Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2015 in 
comp.lang.javascript:
> When I look at the publish source I note that every piece of text is 
> wrapped in a SPAN which has a class attribute.

However, whether you change only the inline styles or also the 
classes and id styles, you would have to assertain that you are only 
changing text, not images and other element-sizes. Otherwise zooming would 
do just fine.

So perhaps keeeping to the <span> elements would be safest for now ;-) 

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

[toc] | [prev] | [next] | [standalone]

#28625

On 4/09/2015 12:39 AM, Evertjan. wrote:
> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in
> comp.lang.javascript:
>
>>>> That style property reflects *inline* styles.
>>>
>>> Yes, because that was the OQ asked by the OP.
>>>
>>
>> What?
>> No ...
>
> Indeed, Andrew said 'class attribute', my mistake:
>
> Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2015 in
> comp.lang.javascript:
>> When I look at the publish source I note that every piece of text is
>> wrapped in a SPAN which has a class attribute.
>
> However, whether you change only the inline styles or also the
> classes and id styles, you would have to assertain that you are only
> changing text, not images and other element-sizes. Otherwise zooming would
> do just fine.
>
> So perhaps keeping to the <span> elements would be safest for now ;-)

I'm now trying this and it seems to be ok (not working in IE 8):


var i,
     j,
     len,
     rules;

for (j = 0; j < document.styleSheets.length; j++) {
   rules = document.styleSheets[j].cssRules;
   len = rules.length;

   for (i = 0; i < len; i++) {
     if ( /font-size/.test(rules[i].cssText) ) {
       rules[i].style.fontSize =
         (parseInt(rules[i].style.fontSize, 10) / 16) + "em";
     }
   }
}
	
document.body.style.fontSize = "100%";


I search for font-size rules and then convert any to EMs based on 16 
pixels equals 1 em (the app only ever publishes font sizes in pixels).

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#28626

Andrew Poulos <ap_prog@hotmail.com> wrote on 04 Sep 2015 in 
comp.lang.javascript:

> I'm now trying this and it seems to be ok (not working in IE 8):
> 
> 
> var i,
>      j,
>      len,
>      rules;
> 
> for (j = 0; j < document.styleSheets.length; j++) {
>    rules = document.styleSheets[j].cssRules;
>    len = rules.length;
> 
>    for (i = 0; i < len; i++) {
>      if ( /font-size/.test(rules[i].cssText) ) {

This will do too, seems more systematical:

 if ( rules[i].style.fontSize ) {

However I would do:

 if ( rules[i].style.fontSize && /px/.test(rules[i].style.fontSize)) {

As I would be able to reuse the code later in an environment
where other values than px are used.

Testing for "px" within .cssText would not do in cases like:

div {width:100px;font-size:50pt;}

or even:

div {font-size:33px;font-size:50pt;}

>        rules[i].style.fontSize =
>          (parseInt(rules[i].style.fontSize, 10) / 16) + "em";
>      }
>    }
>}
>      
> document.body.style.fontSize = "100%";
 



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

[toc] | [prev] | [next] | [standalone]

#28627

On 4/09/2015 5:37 PM, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 04 Sep 2015 in
> comp.lang.javascript:
>
>> I'm now trying this and it seems to be ok (not working in IE 8):
>>
>>
>> var i,
>>       j,
>>       len,
>>       rules;
>>
>> for (j = 0; j < document.styleSheets.length; j++) {
>>     rules = document.styleSheets[j].cssRules;
>>     len = rules.length;
>>
>>     for (i = 0; i < len; i++) {
>>       if ( /font-size/.test(rules[i].cssText) ) {
>
> This will do too, seems more systematical:
>
>   if ( rules[i].style.fontSize ) {
>
> However I would do:
>
>   if ( rules[i].style.fontSize && /px/.test(rules[i].style.fontSize)) {
>
> As I would be able to reuse the code later in an environment
> where other values than px are used.

Thanks. I just thought about what would happen if the app did, in some 
edge case, publish non-pixel values and you've solved it already.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#28656

Andrew Poulos wrote:

> I'm now trying this and it seems to be ok (not working in IE 8):
> 
> 
> var i,
>      j,
>      len,
>      rules;
> 
> for (j = 0; j < document.styleSheets.length; j++) {

The number of stylesheets does not change during the loop, does it?

>    rules = document.styleSheets[j].cssRules;

(I will forever wonder why people find this ripping apart of declaration and 
initialization, and the duplication of identifiers, better than the the 
compact variant, but anyhow:)

This does not work in IE 8 because earlier MSHTMLs do not support the 
“cssRules” property, but the “rules” property instead.

>    len = rules.length;
  
>    for (i = 0; i < len; i++) {
>      if ( /font-size/.test(rules[i].cssText) ) {

You are doing pattern matching on a serialization of what was already 
parsed.  It should be more efficient to determine whether the “font-size” 
property was declared instead.

Apparently the short-hand property equals the empty string, and the 
getPropertyValue() method returns “null”, in Blink, if the property has not 
been declared; both DOM 2 Style CSS and CSSOM specify it should be the empty 
string.  However, both values are type-converted to “false”.

<http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration>
<http://www.w3.org/TR/cssom/#dom-cssstyledeclaration-getpropertyvalue>

>        rules[i].style.fontSize =
>          (parseInt(rules[i].style.fontSize, 10) / 16) + "em";

The value of the font-size property is a CSS /length/, consisting of a 
*floating-point value* and a unit (that is optional if the value is zero).
Use parseFloat() instead.

>      }
>    }
> }
> 
> document.body.style.fontSize = "100%";
> 
> 
> I search for font-size rules and then convert any to EMs based on 16
> pixels equals 1 em (the app only ever publishes font sizes in pixels).

“16px” equals “1em” only if the user or you, for your document, have 16px 
set as base font-size, and an ancestor element has not set a different font-
size (“em” is a *relative* unit, whose value equals the one-hundredth part 
of a “%” value; cf. “rem”).  (Since you are overriding the original font-
size value of the “body” element, you would need to set the font-size of the 
“html” element to “16px”.  But do that only as a last resort.)

<http://www.w3.org/TR/css3-values/#lengths>

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

[toc] | [prev] | [next] | [standalone]

#28614

Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2015 in 
comp.lang.javascript:

> On 3/09/2015 6:51 PM, Evertjan. wrote:
>> ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
>> comp.lang.javascript:
>>
>>> Andrew Poulos <ap_prog@hotmail.com> writes:
>>>> Is one way "better" than the other or is there another way to do this?
>>>
>>>    Maybe you can use a JavaScript element right behind the
>>>    style element to convert all the px values into em values
>>>    (only once, when the page is loaded). When no contents has
>>>    been displayed yet, this should be faster than when it is
>>>    done later.
>>
>> Works fine, start with:
>>
>> body {font-size:62.5%;} // <http://pxtoem.com/>
>>
>> and
>>
>> temp = document.getElementsByTagName('*');
>> for (el in temp)
>>    if (temp[el].style && temp[el].style.fontSize)
>>      temp[el].style.fontSize =
>>        temp[el].style.fontSize.replace(/(\d)px/,'.$1em');
>>
> 
> I'm having a little trouble getting it to work (but thanks for the way 
> forward).

What seems to be the trouble?

I only tested on Chrome, but should be working on all modern browsers.

Do not try to dynamicly change the 62.5% until the above is working,
and changing that same 62.5% does as expected other than by debugging with 
F12 and the up and down keys. 

> So far I've changed
>    temp = document.getElementsByTagName('*');
> to
>    temp = document.body.getElementsByTagName('*');

Why?

Do you have tags having a style
[and if so then also having a fontsize]
outside the body?

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

[toc] | [prev] | [next] | [standalone]

#28650

In comp.lang.javascript message <l8-dnaGgOJ9fWXrInZ2dnUU7-VOdnZ2d@westne
t.com.au>, Thu, 3 Sep 2015 13:55:45, Andrew Poulos <ap_prog@hotmail.com>
posted:

>A 3rd party elearning app that the client is using publishes to HTML.
>The client wants me to add a button that will allow the user to
>increase/decrease the font size.

Contemplate <http://www.merlyn.demon.co.uk/js-tests.htm#Fnt> and its
"Set" button.

Also, in <http://www.merlyn.demon.co.uk/essai-3c.htm>, I use

        var Esay = document.getElementById("essai")
        Esay.innerHTML = Esay.innerHTML.
          replace(/##(\w['~]?)?(\d)?([\.,; ]*)?/g, Func)

in which 'essai' is the ID of a rather large DIV element.

It is perhaps possible to edit the string document.body.innerHTML with a
RegExp and assign the result to document.body.innerHTML - that should
probably be the last statement of a function.

What does the client want to happen to the size of images?  By default
they are sized in px but they can be styled in ex, em, etc.

An alternative might be to tell the client about Ctrl-+ Ctrl-- Ctrl-0
and Ctrl-mousewheel, if the client system supports those.

-- 
 (c) John Stockton, Surrey, UK.  ¬@merlyn.demon.co.uk   Turnpike v6.05   MIME.
   Web  <http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.

[toc] | [prev] | [next] | [standalone]

#28652

On 6/09/2015 5:49 AM, Dr J R Stockton wrote:
> In comp.lang.javascript message <l8-dnaGgOJ9fWXrInZ2dnUU7-VOdnZ2d@westne
> t.com.au>, Thu, 3 Sep 2015 13:55:45, Andrew Poulos <ap_prog@hotmail.com>
> posted:
>
>> A 3rd party elearning app that the client is using publishes to HTML.
>> The client wants me to add a button that will allow the user to
>> increase/decrease the font size.
>
> Contemplate <http://www.merlyn.demon.co.uk/js-tests.htm#Fnt> and its
> "Set" button.

Ok though it looks like it works because the body's font size is set to 
100%. The app does not produce any code that sets a body's font size nor 
does it use anything other than pixel font size dimensions for textural 
content.

> Also, in <http://www.merlyn.demon.co.uk/essai-3c.htm>, I use
>
>          var Esay = document.getElementById("essai")
>          Esay.innerHTML = Esay.innerHTML.
>            replace(/##(\w['~]?)?(\d)?([\.,; ]*)?/g, Func)
>
> in which 'essai' is the ID of a rather large DIV element.
>
> It is perhaps possible to edit the string document.body.innerHTML with a
> RegExp and assign the result to document.body.innerHTML - that should
> probably be the last statement of a function.

Thanks for the RegExp but I'm not sure I want to play with replacing a 
body's HTML when I'm not 100% certain what the app's code is trying to do.

> What does the client want to happen to the size of images?  By default
> they are sized in px but they can be styled in ex, em, etc.

Non-textural elements are to stay unchanged.

> An alternative might be to tell the client about Ctrl-+ Ctrl-- Ctrl-0
> and Ctrl-mousewheel, if the client system supports those.

The entire window scaling is something that the client does not want.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#28661

In comp.lang.javascript message <EOednaQ1K6UCmnHInZ2dnUU7-KWdnZ2d@westne
t.com.au>, Sun, 6 Sep 2015 19:30:11, Andrew Poulos <ap_prog@hotmail.com>
posted:

>On 6/09/2015 5:49 AM, Dr J R Stockton wrote:
>> In comp.lang.javascript message <l8-dnaGgOJ9fWXrInZ2dnUU7-VOdnZ2d@westne
>> t.com.au>, Thu, 3 Sep 2015 13:55:45, Andrew Poulos <ap_prog@hotmail.com>
>> posted:
>>
>>> A 3rd party elearning app that the client is using publishes to HTML.
>>> The client wants me to add a button that will allow the user to
>>> increase/decrease the font size.

...

>> Also, in <http://www.merlyn.demon.co.uk/essai-3c.htm>, I use
>>
>>          var Esay = document.getElementById("essai")
>>          Esay.innerHTML = Esay.innerHTML.
>>            replace(/##(\w['~]?)?(\d)?([\.,; ]*)?/g, Func)
>>
>> in which 'essai' is the ID of a rather large DIV element.
>>
>> It is perhaps possible to edit the string document.body.innerHTML with a
>> RegExp and assign the result to document.body.innerHTML - that should
>> probably be the last statement of a function.
>
>Thanks for the RegExp but I'm not sure I want to play with replacing a
>body's HTML when I'm not 100% certain what the app's code is trying to
>do.

(a) You don't want _that_ RegExp !
(b) My div 'essai' is the ID of the bulk of the page, but not of the
whole page.

>> What does the client want to happen to the size of images?  By default
>> they are sized in px but they can be styled in ex, em, etc.
>
>Non-textural elements are to stay unchanged.
>
>> An alternative might be to tell the client about Ctrl-+ Ctrl-- Ctrl-0
>> and Ctrl-mousewheel, if the client system supports those.
>
>The entire window scaling is something that the client does not want.


Firefox has "Zoom Text Only" lurking in a menu.  Items sized in px do
not zoom, those in ex or em do.  I use this to represent a peculiar old-
beta character repeatedly used by Euler, and not in Unicode.  Starting
with an image of Euler's paper, I captured an image of an instance of
the character and inserted it inline in the HTML text, sized in ex or
em.  It then Zoomed with the text, whether in Zoom Text Only or not.
See
 <http://www.merlyn.demon.co.uk/www-use1.htm#ZTO2> and thereabouts.


But, of course, Ctrl-mousewheel is (I suppose) useless if the need is to
control the Zoom of only part of a page.

-- 
 (c) John Stockton, nr London, UK.  Mail via homepage.  Turnpike v6.05  MIME.
  Web  <http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms and links;
  Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
  No Encoding. Quotes before replies. Snip well. Write clearly. Mail no News.

[toc] | [prev] | [next] | [standalone]

#28653

Andrew Poulos wrote:

> Within the HTML there's a STYLE element with a selector for every SPAN

Yuck.  Have they not already learned to use XML declarations or “link” 
elements?

> […]
> I'm not sure whether I should
> 
> - find all the "span.text" selectors
> - find and modify the font-size selector
> 
> or
> 
> - find all the SPAN elements
> - get and modify the font size directly
> 
> Is one way "better" than the other or is there another way to do this?

If there are many “span” elements, the former is more efficient than the 
latter; insofar it is better.

There is another way to do this.

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

[toc] | [prev] | [next] | [standalone]

#28654

On 6/09/2015 10:07 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> Within the HTML there's a STYLE element with a selector for every SPAN
>
> Yuck.  Have they not already learned to use XML declarations or “link”
> elements?
>
>> […]
>> I'm not sure whether I should
>>
>> - find all the "span.text" selectors
>> - find and modify the font-size selector
>>
>> or
>>
>> - find all the SPAN elements
>> - get and modify the font size directly
>>
>> Is one way "better" than the other or is there another way to do this?
>
> If there are many “span” elements, the former is more efficient than the
> latter; insofar it is better.

Ok, the number of "span.text" selectors matches the number of SPAN 
elements but its better to work through the STYLE element than the HTML 
looking for SPAN elements.

> There is another way to do this.

What way would you recommend? Currently I working through the 
styleSheets and changing in pixel dimensioned font size to EMs.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#28660

Andrew Poulos wrote:

> On 6/09/2015 10:07 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> Within the HTML there's a STYLE element with a selector for every SPAN
>> […]
>>> […]
>>> I'm not sure whether I should
>>>
>>> - find all the "span.text" selectors
>>> - find and modify the font-size selector
>>>
>>> or
>>>
>>> - find all the SPAN elements
>>> - get and modify the font size directly
>>>
>>> Is one way "better" than the other or is there another way to do this?
>>
>> If there are many “span” elements, the former is more efficient than the
>> latter; insofar it is better.
> 
> Ok, the number of "span.text" selectors matches the number of SPAN
> elements but its better to work through the STYLE element than the HTML
> looking for SPAN elements.

ACK.  Note that this can be greatly simplified nowadays (and with the proper 
emulation of ECMAScript Array methods, such as provided by my JSX):

  var rules = [];

  [].forEach.call(document.styleSheets, function (styleSheet) {
    rules = rules.concat([].slice.call(
      styleSheet.cssRules || styleSheet.rules));
  });

  var relevantRules = rules.filter(function (rule) {
    return /(?:^|\s)span\.text\d+Font\d+\s*(?:,|$)/.test(rule.selectorText);
  });

“relevantRules” can further be filtered to contain only the rules that have 
the “font-size” property set, and/or you can .forEach() on it, and do the 
test in the pseudo-loop.
 
>> There is another way to do this.
> 
> What way would you recommend? Currently I working through the
> styleSheets and changing in pixel dimensioned font size to EMs.

Given that you are modifying a stylesheet based on previous declared 
property values, and that you need to support IE 8, this is the best 
approach.  (In our company, we have discontinued support for IE 8 on most of 
our platforms, based on the fact that its users constitute less than 1 % of 
our visitors and customers.)

Otherwise I would have recommended to consider adding a CSS3 style rule to 
override declarations for all “span” elements whose “class” attribute value 
contains a class name that begins with “text”:

  span[class^="text"],
  span[class~=" text"] {
    property-you-want-to-override: new-value !important;
  }

<http://www.w3.org/TR/css3-selectors/#attribute-substrings>

You can do this statically, or with client-side scripting.  The most 
efficient and compatible way to augment stylesheets with client-side 
scripting is to append a new “style” element:

  var style = document.createElement("style");
  style.type = "text/css";
  var styleText = 'span[…] …';

  if (typeof style.styleSheet != "undefined")
  {
    /* older MSHTML */
    style.styleSheet.cssText = styleText;
  }
  else
  {
    style.appendChild(document.createTextNode(styleText));
  }

  (document.head || document.getElementsByTagName("head")[0])
    .appendChild(style);

If the third party is using “!important” in their stylesheet, you may have 
to add more simple selectors in the rule’s selector in order to increase 
the selector’s specificity.

Bear in mind that “!important” declarations in the user stylesheet always 
have the greatest weight.

<http://www.w3.org/TR/CSS2/cascade.html#cascade>
<http://specificity.keegan.st/>
<http://www.w3.org/QA/Tips/color>

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

[toc] | [prev] | [next] | [standalone]

#28662

On 8/09/2015 4:35 AM, Thomas 'PointedEars' Lahn wrote:

> Otherwise I would have recommended to consider adding a CSS3 style rule to
> override declarations for all “span” elements whose “class” attribute value
> contains a class name that begins with “text”:
>
>    span[class^="text"],
>    span[class~=" text"] {
>      property-you-want-to-override: new-value !important;
>    }

This is very interesting but I'm stuck.

If there are a number of classes and each contains a font-size rule 
(each of which might set to a different size) how is it possible for the 
above rule to appropriately address all of the font size? For example if 
one class has this rule

   font-size: 16px;

and another class has this rule

   font-size: 14px;

how does

   span[class^="text"],
   span[class~=" text"] {...

cover both without changing both to the same size?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web