How to handle the text once moved on the grid

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:

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.

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

.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.

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.

It seems to be working for me?

jsfiddle.net_whqfv2s5_

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.

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; 
  }

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; 
  }

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.

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.

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!

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.

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?

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?

1 Like

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

1 Like

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!

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.

1 Like