How to handle the text once moved on the grid

[Jack_Tauson_Sr]

I’m moving blue boxes from left to right (on the grid) after clicking Move Text Content! button. Here are the steps I follow:

1. Select one option from Select options dropdown.

2. Select a color from the dropdown.

3. Click Show Options button

4. Enter a row and column (For example A and 1) and then click calculate

5. Hit the Move Text Content! button to move blue boxes on the grid.

Here’s an Image showing an example with blue color move.

As can be seen, it’s very hard to read the text when it comes to blue color. Also, I have Black color in the dropdown list (which doesn’t work for some reason) but if it would have worked, it would have disappeared the text as background and text color are both black. Hence, I am wondering how can I handle the text color using CSS such that whatever color I select for the move, is readable by the user easily. Here’s my JSFiddle code:

[PaulOB]

You can try this trick but results can vary.

.words{
filter: invert(1);
mix-blend-mode: difference;
}

Otherwise the usual way is to give a partially opaque background to .words in white and then color the text black.

[Jack_Tauson_Sr]

@PaulOB

You can try this trick but results can vary.

.words{
filter: invert(1);
mix-blend-mode: difference;
}

Thanks Paul for helping again with your code. Do you mean I could modify the existing .words class which is

.words {
    cursor: move;
    transition: padding 0.5s ease;
  }

to

.words {
    cursor: move;
    transition: padding 0.5s ease;
    filter: invert(1);
    mix-blend-mode: difference;
  }

I might have misunderstood something here as that seem showing some off behavior as shown here.

[Jack_Tauson_Sr]

@PaulOB

Otherwise the usual way is to give a partially opaque background to .words in white and then color the text black.

I was thinking about this the same as a last resort such that a white background will aways be there since I am not using white color in my dropdown.

[PaulOB]

@Jack_Tauson_Sr

as that seem showing some off behavior as

It seems to be working for me?

Is that not what you meant or is this a browser thing as I can’t check multiple browsers at the moment. I was testing in Chrome.

[PaulOB]

I think you may have meant the buttons on the left as I see the text is missing there. I was only looking at the boxes on the right so you may need to be more specific.

  .words {
    cursor: move;
    transition: padding 0.5s ease;
  }
  #drop-em .words{
    filter: invert(1);
    mix-blend-mode: difference; 
  }

[Jack_Tauson_Sr]

Could you share your codepen or jsfiddle with this change?

I think I’m little confused where are you adding the id drop-em in the HTML or dynamically generated HTML code that’s used in the following CSS:

#drop-em .words{
    filter: invert(1);
    mix-blend-mode: difference; 
  }

[PaulOB]

@PaulOB

  .words {
    cursor: move;
    transition: padding 0.5s ease;
  }
  #drop-em .words{
    filter: invert(1);
    mix-blend-mode: difference; 
  }

This was all I changed in the fiddle.

I changed .words back to what it was before and then just added the id in front so that it only targets the grid on the right side as per my screenshot. The code won’t work on the left blue buttons as they are set up differently.

[Jack_Tauson_Sr]

Thanks, I forgot to save the fiddle while testing, and now it’s showing what you showed. Here’s the JSFiddle. I think that change has broken one thing. It’s not showing the other background colors.

For example, in the screenshot below, I selected Blue when I filled in the cell A1, A2 and A3 and then selected Black color while selecting B1 and something is odd which I think I would need to investigate.:

Ignore my above message as the change is working in my actual code - not sure what’s up with JS Fiddle above.

[Jack_Tauson_Sr]

@PaulOB

ou can try this trick but results can vary.

.words{
filter: invert(1);
mix-blend-mode: difference;
}

One question on this:

So as I can understand that the color of words is inverted using the invert(1) and 1 specifies by how much amount we are inverting it. Is it going to pick random color based on the CSS property filter or is it happening because of mix-blend-mode:difference? Thanks!

[PaulOB]

@Jack_Tauson_Sr

Is it going to pick random color based o

No it’s not random it’s basically the opposite of the background which means you always get a reasonable contrast.

It’s quite complicated to explain but you can read more here in the section at the bottom that combines filter with mix-blend-mode.

Creative text styling with the CSS mix-blend-mode property - LogRocket Blog

[Jack_Tauson_Sr]

Thanks. I am going to stick with the other options as in some case it’s still not easy to read after using mix-blend approach.

So I an thinking of just using style='color:black;background-color:white' while building the HTML like this:

html = "<div data-id="+i+"><span class='words' style='color:black;background-color:white'  data-id="+i+">OptionOne#"+i+"</span></div>";
            $("#phrase").append(html);

Here’s my JSFiddle for the same. Do you think I need improvement in what I’ve done above?

[PaulOB]

@Jack_Tauson_Sr

Do you think I need improvement in what I’ve done above?

I’d give the words a little padding to make it neater and make the white background a little bit opaque so the background shows through a bit.

e.g.

    color: black;
    background-color: rgba(255,255,255,0.8);
    padding: 5px;

Why are you adding the style with JS ? You could just have use the class .words to add the style?

[Jack_Tauson_Sr]

@PaulOB

Why are you adding the style with JS ? You could just have use the class .words to add the style?

Yeah, you are right. In this case, I should just move it inside the CSS file instead of using it in JS.

[Jack_Tauson_Sr]

By the way, Paul, I have a different question and wondering if you could share your thoughts on the following:

I will be eventually saving all the grid related details (I’ll have a save button somewhere on top of the grid which will achieve this) in a database table and I am yet to design the table. I am wondering if you have any suggestion on the same like what columns I should consider and what should I consider saving.

Here are some of my thoughts:

1. Since I’ll be saving the contents inside the grid, I will have to have a column for storing the values of the divs (blue text box content which goes on the grid) like Option#1, Option#2 etc.

2. Since I am also having different colors on the grid. I believe I should be storing the CSS for those specific divs as well. Not sure if saving CSS info sounds reasonable in terms of database design.

3. I might want to save the cell value which drives the pattern.

Is there anything you could think of that could be worth consider to save or something I should avoid and handle differently from the above mentioned points? Thanks!

[PaulOB]

@Jack_Tauson_Sr

By the way, Paul, I have a different question

That’s probably better asked as a new question and you will get answers from others with more experience in saving data than me.

I would just say that simpler is usually better but may mean storing more data than just saving the steps to reproduce.

[Jack_Tauson_Sr]

Hey @PaulOB ,

Could you tell me what’s the issue with me using hex color code instead of color names?

I changed the brown color to use hex code #7c4700 as shown below:

<select id="lineupColors">
       <option value="-">select</option>
      <option value="blue">Blue</option>
      <option value="orange">Orange</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="purple">Purple</option>
      <option value="#7c4700">Brown</option>
      <option value="black">Black</option>
      <option value="magenta">Magenta</option>
    </select>

And it’s not showing any background color. I’m planning on changing all color values to hexcodes. Here is the JSFiddle with this change showing white background instead of brown.

[PaulOB]

@Jack_Tauson_Sr

And it’s not showing any background color

From MDN:

Unfortunately styling the <option> element is highly limited. Options don’t inherit the font set on the parent. In Firefox, only color and background-color can be set, however in Safari it’s not possible to set any properties. You can find more details about styling in our guide to advanced form styling .

[Jack_Tauson_Sr]

Hmm. I guess the best option in this case would be to have a database table of color with 1 to 8 as values for each color and then retrieve the color value based on value and then add the color hex code on this line $('.color-'+selectedColor).css('background-color',selectedColor);. That would avoid retrieving the value from the option tag. Does this sound like a better option?

<select id="lineupColors">
       <option value="-">select</option>
      <option value="1">Blue</option>
      <option value="2">Orange</option>
      <option value="3">Red</option>
      <option value="4">Green</option>
      <option value="5">Purple</option>
      <option value="6">Brown</option>
      <option value="7">Black</option>
      <option value="8">Magenta</option>
    </select>

[Jack_Tauson_Sr]

Got it working.

It was happening because I had .color-#7c4700 as an INVALID CSS selector.

Using $('.color-' + CSS.escape('#7c4700')).css('background-color', '#7c4700'); fixed the issue.