How to color the background of a box corresponding to a row, column, diagonal line, or element in a matrix

[XYZ]

Dear friends

I think if we can doodle the background box area corresponding to the matrix elements and describe it in code, we can combine numbers and shapes when learning the properties of the corresponding matrix, multiply the elements defined by the formula, and make it clear at a glance on the matrix

The first row of the matrix

The first column of the matrix

Diagonal lines in a matrix

Any slanted row in a matrix

Elements in a random matrix

Any response would be greatly appreciated

[telumire]

What are you using to render these mathematical equations? If it’s html or mathml under the hood then you can set a background color with css.

[XYZ]

It’s single HTML, I thought of this forum post, but it’s a bit distant from my matrix coloring

Change the background color of one single cell easily

Hi Experts, I am looking for an easy possibility to change the background of a single cell (not of the text) within a table. Background: I have some table with useful information and in on column are further links. But in one or two of these cells are no links available and I want to gray them out to highlight for the user that there is no further content available. Is it possible to do easily? Thanks in advance Stefan

[twMat]

As telumire says, it is done with CSS.

If you show show the code to produce the matrix it will be easier to help you.

If your goal is to manually set the color for specific rows, cells etc, then it is simple with CSS. But if you want arbitrary cells to get their colors dynamically then it might be trickier.

[TW_Tones]

To note that with the internals plugin installed, as on TiddlyWiki.com you can preview the RAW HTML output. this allows you to see what the resulting html is and thus look at how to apply CSS.

If you are a little more experienced you may see the browsers inspect tools to see the existing css selectors etc… that may be present given the existing CSS.

• View the output of your maths and use the inspect tool on the result.

The key to this approach is identifying or adding appropriate selectors so you can target the element you want to change with the CSS you want such as a red border.

More advanced methods include

• nth row or nth column tricks
• Wrapping content in a span or div so you can address the html within it
  • eg nth Paragraph inside named div
• be careful not to be too general that your CSS impacts other elements on your tiddlywiki

The TiddlyWiki approach may be to use TiddlyWiki Script to test for and set appropriate style or class on the content you are displaying. For example %if, list or reveal