0

It's an obscure nut I'm trying to crack and even trying to put it into a question is difficult so best I show what I have and what I want to get:

<div>
  <span>A</span>
  <span style='font-weight:bold'>B</span>
  <span style='font-weight:bold;font-style:italic'>C</span>
  <span style='font-weight:bold'>B</span>
  <span style='font-style:italic'>C</span>
  <span>A</span>
</div>

I'm trying to devise an algorithm to convert this to:

<div>
  A
  <span style='font-weight:bold'>
    B
    <span style='font-style:italic'>C</span>
    B
  </span>
  <span style='font-style:italic'>C</span>
  A
</div>

This is a simplified example of course but the goal is to take a series of sequential spans with various inline styles and convert to a simpler result that displays identically. I have spent days on this and come tantalizingly close but always found cases where it broke. I don't need it to work with all styles but font-weight, font-style, color, font-size and font-family are needed. I know it's not likely but if someone out there has already done something like this I would love to see how as it would save me a world of pain.

I have made a function to return an object of common styles of 2 elements so for example:

cs = getCommonStyles([cn,c]);

cn and c are span elements with inline styles and cs is an object containing the common styles. An example return value from this function might be:

{fontWeight:"bold", fontStyle:"italic"}

where both styles are present in each element. So any suggested answer is welcome to assume use of such function.

UPDATE: The above is just an example. The combination of styles is arbitrary as is the number of sequential input spans which could number in the hundreds. The html will be sent to the server and I'm trying to cut down on the amount of data.

poby
  • 1,572
  • 15
  • 39
  • 1
    You're thinking this wrong. Think with semantics, what does it *mean*, the good looks should come after that. – Madara's Ghost May 20 '13 at 17:31
  • This is so counter intuitive that it can only be a class project of some sort. CSS already accounts for a myriad of styling options that deals with both adjacent and nested elements. Far easier to strip the span elements of their inline styling with a few lines of JS and use a stylesheet than to try to account for all the combinations of just the few styles you mention. – fnostro May 20 '13 at 17:56
  • Question: are your spans ever nested? Your example shows just a linear sequence of spans, will this always be so? – HBP May 20 '13 at 18:21
  • @fnostro Its been 30 years since I was in a classroom. No this is a very small part of a massive project I've been working on for some years and there are good reasons why I'm looking to solve this and why I need to use inline styles in this case. – poby May 20 '13 at 18:23
  • @HBP The input spans are never nested, always sequential. – poby May 20 '13 at 18:25

1 Answers1

0

You can see a colored example here:

[http://jsfiddle.net/yAywd/1/][1]

You can use the CSS3 :nth-child() pseudo-class like this:

div span:nth-child(1n) {
    font-weight:bold;
}

div span span {
    font-style:italic;
    font-weight:normal !important;
}

div span:nth-child(2n) {
    font-style:italic;
}

http://reference.sitepoint.com/css/pseudoclass-nthchild

Anyway I think that the semantic in your example is wrong.

SionBird
  • 1
  • No good. MUST be all in javascript, no style sheets. Also the example I gave is just an example. The actual styles could be any combination and the number of sequential spans could in the hundreds. I want to simplify the html prior to sending it to the server. – poby May 20 '13 at 18:37