Subtitles for individual words

  • I would like to add subtitles to individual words. The subtitle should be displayed centered, in a smaller size and in a different color below the word.

    As an example, it should look like the following image.

    I tried to implement this formatting with a table, but I ran into the problem that I couldn’t format cells individually. After that, I tried columns with paragraphs, but the options for aligning the individual paragraphs were not as extensive as required.

    Is my intended formatting even possible in WordPress?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    I think it’s possible, but I’ve not actually tried to do so. What I suggest is to place each word and its subtitle in its own div container. The subtitle would then also be in its own div container nested within the word’s container. The word containers can be CSS styled to float: left; so they more or less behave like regular text, responsively taking up whatever width is available before line feeding to the next line when necessary.

    Because the subtitle is nested within the word’s container, it’s forced to go where ever the word goes. It can be centered within the word container by setting its left and right margins to auto. I think it’ll also need clear: both; style to ensure it always occurs below the word.

    As I implied, this is all untested, but I think it’s your best bet for success. I think my suggested HTML structure is a sound idea. Proper implementation is largely a matter of applying the right CSS.

    Thread Starter atalanttore

    (@atalanttore)

    Thanks for your idea.

    I assume that there is currently no way to achieve this using only nested blocks in the Gutenberg editor.

    Moderator bcworkz

    (@bcworkz)

    There might be a way. I’m not that well versed in the intricacies of the block editor. I don’t think it’d be worth the effort if there were a way. I think it’d be easier to manually build the whole thing in a custom HTML block.

    Thread Starter atalanttore

    (@atalanttore)

    In order to be able to build the whole thing in a custom HTML block, I first need to brush up on my HTML skills. That will take a while.

    Moderator bcworkz

    (@bcworkz)

    The needed HTML isn’t so bad. The following, repeated as necessary should be adequate:

    <div class="outer">
	<div class="title">
		Lenovo
	</div>
	<div class="subtitle">
		manufacturer
	</div>
</div>

    The challenge is really in coming up with appropriate CSS to get this to display as desired.

    Thread Starter atalanttore

    (@atalanttore)

    Unfortunately, I can’t brush up on my CSS skills because I don’t have any.

    Moderator bcworkz

    (@bcworkz)

    It’s not too late to start learning if you’re at all interested ?? Or if it’s important enough, you could hire some professional help through a resource such as https://jobs.wordpress.net

    To be clear, I’m not looking for any kind of compensation, nothing of the sort. Offering or soliciting compensation in these forums is against our guidelines.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.