0

I need to display a large list of decimal numbers on the web (~300) all in the range of [-1, 1]. The intent of showing these numbers isn't to display their full precision, but to convey to the user that this is the output from a program. It is a requirement that the actual numbers must be show.

Perhaps not important, but the context of these numbers are coming from a document vector created from a word embedding.

What I've got so is functional, but ugly. CSS (and design in general) are not skills I have developed, so any help is appreciated.

enter image description here

|improve this question
  • 1
    I'd try lining up all the values by placing a space before all non-negative numbers – Zach Saucier Apr 12 at 16:25
  • It looks like this question isn't a good fit for the site, given the downvote. I'll happily close it and try again elsewhere if this is the case. – Hooked Apr 12 at 16:44
  • I think the question is kind of related to graphic design since it's about how to make a list of numbers look good. Have you tried what @ZachSaucier suggest? That was my initial thought too. – Wolff Apr 12 at 17:17
  • 2
    I'd use a table. The cells will naturally align the numbers.... and it is tabular data. – Scott Apr 12 at 17:38
1

For the purposes of completeness, I simply arranged the data in a cell as @Scott suggested in a comment. If a better solution is presented, I'd be happy to select it:

enter image description here

with the CSS as

.table-row {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-grow: 0;
    -webkit-flex-grow: 0;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width: 100%;
}

.text {
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 5px;
    font-size: 80%;
    text-align: right;
}
|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.