Tribute Page: help with aligning vertical text (japanese characters)

1

Hi,

I’ve been working on the first project (tribute page), which I’ve found surprisingly difficult :neutral_face:
I flew through the exercises no problem, but I think I’m a bit overwhelmed with the amount of different ways you can approach any given aspect of a webpage!

 

TBH, I have found the problem sets in CS50 much easier to tackle, even those requiring malloc-ing of memory, and pointers-to-pointers :confused:

I’m trying to use mainly vanilla HTML/CSS as I’m finding it confusing to mix in bootstrap as well - I can see the utility of frameworks, but I’d like to get a good handle on the basics first.

I’ve tried to figure out everything myself, and have been managing so far, but finally hit a hurdle I can’t get over.

 

I need to align text running vertically down the side of the portrait image, as it is the name of the Japanese poet my tribute is for. I would also like to do the same thing in the “<ul>” I’m using for my timeline. At the moment, whatever I do, its appearing at the edges of the screen, overlapping the list below the image.

I’ve tried using align-text and float in various combinations with <p>'s <span>'s and <div>'s, inline and using ID’s in the CSS file but I can’t get it to work. TBH, I’m struggling with knowing when which and where <p> <span> <div> are appropriate.

My page is still very much a work in progress: I still have the main body content to write, and links to add after I fix this. I’m still a bit unsure if the green text is a bit jarring (supposed to be green tea coloured, as per his nickname!).

Any comments gratefully received!

2

Hi,

your page looks interesting.

Maybe this is what you are looking for:
https://codepen.io/jonass95/pen/prrEvb

1 Like
3

You’re awesome.
Thanks very much for that, exactly what I was trying to do!

Glad you think it’s interesting, wasn’t sure if anyone else find it worth reading! I’m looking forward to getting some of his poetry up, I think its amazing - one of the reason’s I visited Japan (the background photo is mine :slightly_smiling_face:)

If you don’t mind, could you explain a little about this part of the code?

  width:1px;
  word-wrap: break-word;
  display:inline-block;

I understood that before this you’ve created an image container to apply the horizontal alignment on (where I was trying to apply it directly to the image), and vertical alignment on the image itself.

I’m guessing that here you’re creating a small bounding box for the text, which is forcing it to wrap the characters underneath each other? If so, what is the display:inline-block for?

4

Thanks :slight_smile:

Yes, first I created the image container which has a 100% width and aligns the content horizontally centered.
Then there is the image, which is by default an inline-element. But the p-tag is by default a block-element, which means that it fills a complete row. So by giving the text display inline it would stay in one line with the image, but inline-elements can’t have a fixed width. That’s what display inline-block is for.
Maybe this page explains it a bit better :slight_smile:
https://www.w3schools.com/Css/css_inline-block.asp

Then the text-element has a width of 1 px forcing it to wrap the characters underneath each other. But by default the browser breaks words only at allowed break points. By applying word-wrap: break-word the browser is allowed to break the words.
https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

1 Like