Drawing memory maps

Krista H

Hello folks, I'm stuck on drawing memory maps. While I could just use a drawing tool, a memory map is essentially a type of table that shows the corresponding regions in a memory system, with respect to address. I've been using tables in LibreOffice writer to draw memory maps, but I'm having issues shading adjacent blocks as well as drawing borders around blocks.
Any and all comments will be appreciated.
Krista H

Delmar

Do you have examples? LibreOffice has a "Draw" application that may be more useful than the "Writer."

Krista H

Hi Delmar, thanks for your reply.
The figure that I've inserted is what the memory map looks like in the finished form. Each block represents a region in the memory system that either contains a device or is unused. To the right of the occupied blocks is its start and end address. The top and bottom address values are written in. The prefix 0x indicates hexadecimal values.

I drew the figure in LibreOffice writer as a table, as shown in the second figure.

Note the use of borders and in one case, adjacent cells are combined.
While I could use a drawing tool, I'd prefer to not do so. Any and all comments will be appreciated.
Krista H

Justin Shorb

Krista H Note, I did just use Gemini to get the basic structure of the table, and then my own knowledge of CSS and HTML to clean that up using JS Fiddle - we do have ways of putting in some basic CSS like this and you can edit the HTML in the regular LibreTexts editor.

Justin Shorb

The nice thing about using a table (even an HTML one) is that it will be more screen-readable. Figures will end up having to have alt text which would be quite useless, really. There are probably some other ways to do this, but this table has top and bottom labels for boxes, which may be good (depending on how you want the context). There isn't a header row or header column which may not pass accessibility testing, but it may confuse things to put those headers in (maybe it would be good to put them in as ARIA labels instead - I am less familiar with those).

<table class="memory-table"> <tbody> <tr> <td class="block rom-height">ROM</td> <td class="label-holder"> <span class="label top">0x3FFF</span> <span class="label bottom">0x2800</span> </td> </tr> <tr> <td class="block gap1-height"></td> <td class="label-holder"></td> </tr> <tr> <td class="block ram-height">RAM</td> <td class="label-holder"> <span class="label top">0x1FFF</span> <span class="label bottom">0x0400</span> </td> </tr> <tr> <td class="block gap2-height"></td> <td class="label-holder"></td> </tr> <tr> <td class="block devices-height">Devices</td> <td class="label-holder"> <span class="label top">0x01FF</span> <span class="label bottom">0x0180</span> </td> </tr> <tr> <td class="block gap3-height"></td> <td class="label-holder"> <span class="label bottom">0x0000</span> </td> </tr> </tbody> </table>
And this CSS:
`/* Core Table Styling /
.memory-table {
border-collapse: collapse;
th, td { padding: 0; } / Clear defaults */
}

    /* Left Column: Visual Blocks */
    .block {
        width: 180px;
        border: 2px solid #000000;
        text-align: center;
        vertical-align: middle;
        font-family: Arial, sans-serif;
        font-size: 22px;
        font-weight: bold;
        background-color: #ffffff;
    }

    /* Proportional Heights for the Blocks */
    .rom-height     { height: 80px; }
    .gap1-height    { height: 24px; }
    .ram-height     { height: 100px; }
    .gap2-height    { height: 24px; }
    .devices-height { height: 60px; }
    .gap3-height    { height: 30px; }

    /* Right Column: Address Labels Container */
    .label-holder {
        position: relative;
        width: 120px;
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
        font-size: 20px;
    }

    /* Absolute alignment trick directly bound to cell bounds */
    .label {
        position: absolute;
        left: 15px; /* Spaces text away from the right border line */
        white-space: nowrap;
        line-height: 1;
    }

    /* Snaps text center perfectly over the top border line */
    .label.top {
        top: 0;
    }

    /* Snaps text center perfectly over the bottom border line */
    .label.bottom {
        bottom: 0;
    }

`
Generates this:

Krista H

Thanks, I'm quite impressed. This looks quite nice. I'll spend some time looking closer at your code and also investigating the tools.

Krista H

I very much would like to know how you actually inserted the above text into a LibreTexts document. I'm not up to speed yet in how to handle the CSS content. Thanks in advance,

Krista

Justin Shorb

Krista H If you give me a link to one of your pages, I am happy to put one in there as an example to copy! Also, feel free to stop by our Office Hours on Tue/Thur

Krista H

Justin Shorb
I have a practice document that I'm working with
https://eng.libretexts.org/Workbench/Practice/02%3A_New_Page

Thanks in advance,
Krista

Krista H

Also, how might I have a separate file/document for common style information/content?
Krista

Justin Shorb

Krista H For common style sheets - I may need to have @Delmar step in, as I haven't done those myself. But I know we have done them in the past for issues like this one.

Justin Shorb

Krista H I used the drop-down menu Style-> CSS to add the CSS into the page, and then added the HTML in the HTML editor.

I will wait to hear from @Delmar but I think we have a way to transclude that CSS onto all pages once you get it looking like you want it to (the CSS likely needs a little tweaking to get the row heights and the colors as you want, first).