HTML + CSS -> https://jsfiddle.net/cLz7vgxo/

First of all let me tell you I hate web development. It’s so confusing.

I am trying to render a list of emojis here. For context, “shortcode” means the text like :emoji-name: and “keywords” refers the text below the shortcode.

The code I forked from uses a grid to do this. This worked fine in their case. But I would like to show the emoji’s keywords below the shortcode, just as an exercise for myself.

The grid renders fine until the point where the keywords text become too long. In the above example, you can see it with the :wikipedia: emoji. I would like the shortcode and keywords to be to the right of the emoji image but it moves to below the image and because I am a stupid dumb idiot I have no clue how to fix this.

I understand that it’s not possible to show the keywords elegantly if they become too long but I am open to any options like cutting them off with ellipsis, or having a scrollbar, or any other way really. I am not picky. I just need help.

  • Vent@lemm.ee
    4·
    6 months ago

    I’m on mobile, so I can’t test out any specifics, but this is typically handled with overflow and text-overflow. With those two, plus maybe playing with width, you should be able to achieve what you’re looking for.

    CSS can be really hard and unruly sometimes, even for professional web devs with years of experience. It doesn’t make you dumb. Struggling with stuff like this is exactly what everyone goes through as an essential step of the learning process.

  • bobs_guns@lemmygrad.mlEnglish
    4·
    6 months ago

    Maybe you can use flexbox or subgrid within the grid elements. text-overflow: ellipsis and white-space: nowrap should be helpful too.

    • loathsome dongeater@lemmygrad.mlOPEnglish
      3·
      6 months ago

      Yeah I think the first think to do is to make the side-by-side layout sort of immutable. Currently the image and text, which compose one cell of the grid, are just display: inline-blocks. If I do text-overflow ellipsis or hidden for the keywords, the text is still visible anyway.

      • bobs_guns@lemmygrad.mlEnglish
        3·
        6 months ago

        I’m definitely not enough of a css expert to be able to figure it out in a reasonable amount of time. What I shared is just my guess. I do think you want to make sure the three parts are stuck together in that layout somehow, and my guess would be that subgrid would be the best way to do that because one part of the emoji info is above the other part, but I’m not totally sure about that.

  • nephs@lemmygrad.ml
    3·
    6 months ago

    I’m on mobile, so I’ll come back tomorrow with a computer to check, but I’d try .emoji {display:flex}.

    It’s the container of both elements you want in the same line, and at first read, it looks unstyled.

    Because everything else is inline-block, it is just blocks as text, which wrap when they’re grow horizontally. Flex doesn’t, by default, if I remember it correctly.

    Also, if you’re studying, mdn is your new best friend. And I think gpt can be useful, to ask a few specific questions, too, but I dont have much experience in that realm.

  • landlords_morghulis@lemmygrad.ml
    2·
    6 months ago

    What about something like this: https://jsfiddle.net/pskr18at/

    The keywords can wrap down to expand the row height, which is probably the nicest way to handle that. The image proportions can be tweaked easily without causing stretching and scaling problems.

    Also, does this the emoji list need to be static html? I dislike javascript more than nearly anyone, but using a web component could really simplify this and improve load times. You could initialize it from a single array of strings if the filenames and shortname (without the colons) matched. You wouldn’t need to use external scripts either, just a shadow dom and a little js.

    • loathsome dongeater@lemmygrad.mlOPEnglish
      1·
      6 months ago

      What about something like this: https://jsfiddle.net/pskr18at/

      Also, does this the emoji list need to be static html?

      This HTML is generated by a jinja template. But I am in the process of porting this to a svelte app so that it can be deployed to something like github pages. I am too poor for cloud computing.

      • landlords_morghulis@lemmygrad.ml
        1·
        6 months ago

        Are those changes an improvement? I can tweak it a bit if it helps.

        I assumed this was part of some new feature to be hosted on lemmygrad, but it maybe sounds more like a side thing? I stopped using fascismhub a long time ago, but its not hard to deploy SSGs that contain js on gitlab or codeberg and the like either.

        • loathsome dongeater@lemmygrad.mlOPEnglish
          2·
          6 months ago

          I’m not affiliated to the Lemmy project. It’s a small side project to learn some new stuff.

          The changes are great. I think that layout is better. I can tweak it from here. The css is clean and readable.