The Tridecadal Korean (astralblue) wrote,
The Tridecadal Korean
astralblue

[RawJournal] Centering a block of text within given width

This trick is especially useful when you embed a block of quoted lyrics or some other poetic text with relatively short lines, except for one or two very long lines.

Example source code:

<blockquote style="border: solid #808080; background: #404040; padding: 1em; color: #c0c0c0; text-align: center">

<p>쪽지를 보내도, 이제 그는 보지 못합니다.<br />
편지를 보내도, 이제 그는 보지 못합니다.</p>

<p>그러나 그는 행복합니다.<br />
친구의 기억이 소중한 것을 알기에.<br />
친구의 기억이 소중한 것을 알기에.</p>

<p>얼굴도 보지 못한 이의 얘기가 이리도 가슴을 아프게 할 수도 있나 봅니다.&nbsp; 하지만... (중략)</p>

<p>하늘 저 편으로 날아간 내 친구야,<br />
잘 지내렴.<br />
행복해야 해.</p>

</blockquote></pre>

Looks like:

쪽지를 보내도, 이제 그는 보지 못합니다.
편지를 보내도, 이제 그는 보지 못합니다.

그러나 그는 행복합니다.
친구의 기억이 소중한 것을 알기에.
친구의 기억이 소중한 것을 알기에.

얼굴도 보지 못한 이의 얘기가 이리도 가슴을 아프게 할 수도 있나 봅니다.  하지만... (중략)

하늘 저 편으로 날아간 내 친구야,
잘 지내렴.
행복해야 해.

The third paragraph here is a prose, originally with a couple of sentences (only one shown here).  Depending on the friend page layout, the browser window size and the screen resolution, this paragraph can be 4-5 times as wide as the rest of the text, which is a verse.  This may interrupt the visual flow of the verse, and therefore ruin the overall poetic atmosphere.

This can be remedied by limiting the width of the whole text block, to be roughly the same as, or a bit wider than, the rest of the lines.  This, in turn, can be achieved in a couple of different ways; the first is to limit the width of the <blockquote> tag, by replacing the first line:

<blockquote style="border: solid #808080; background: #404040; padding: 1em; color: #c0c0c0; text-align: center">

with:

<blockquote style="margin-left: auto; margin-right: auto; border: solid #808080; background: #404040; padding: 1em; width: 20em; color: #c0c0c0; text-align: center">

which looks like:

쪽지를 보내도, 이제 그는 보지 못합니다.
편지를 보내도, 이제 그는 보지 못합니다.

그러나 그는 행복합니다.
친구의 기억이 소중한 것을 알기에.
친구의 기억이 소중한 것을 알기에.

얼굴도 보지 못한 이의 얘기가 이리도 가슴을 아프게 할 수도 있나 봅니다.  하지만... (중략)

하늘 저 편으로 날아간 내 친구야,
잘 지내렴.
행복해야 해.

The CSS property width: 20em1 limits the width to 20 times the height of the font within the <blockquote> block, and the two CSS properties margin-left: auto; margin-right: auto centers the quote block with respect to its containing block.

Or, you can preserve the style of the <blockquote> and yet limit the width of only the text inside the quote block, by introducing a separate <div>...</div> block:

<blockquote style="border: solid #808080; background: #404040; padding: 1em; color: #c0c0c0; text-align: center">
<div style="margin-left: auto; margin-right: auto; width: 20em;">

</div>
</blockquote>

which looks like:

쪽지를 보내도, 이제 그는 보지 못합니다.
편지를 보내도, 이제 그는 보지 못합니다.

그러나 그는 행복합니다.
친구의 기억이 소중한 것을 알기에.
친구의 기억이 소중한 것을 알기에.

얼굴도 보지 못한 이의 얘기가 이리도 가슴을 아프게 할 수도 있나 봅니다.  하지만... (중략)

하늘 저 편으로 날아간 내 친구야,
잘 지내렴.
행복해야 해.

Note how the width of the quote block is the same as the original yet the width of the text inside the quote block is limited as if it's confined within an invisible block.  The additional <div> block we introduced is the invisible block here.


1 em is a typographic unit of length which is the same as the nominal height of a given font, which is usually defined to be the height of the uppercase M in the font (hence the name).  Unlike px (pixel), the unit length represented by em varies according to the font size specified by/implied in the document, which makes it a suitable way (but not ideal; I will talk about this later in a separate entry) to specify the width of the quote block in this case, because in this case we set the block width in terms of the text width, which in turn depends on the font size.

There is also a comparable half-height length unit, named ex -- defined to be the height of the lowercase x in the font.

Subscribe

  • Does Anyone Know…

    Does anyone know the title of this one song you can listen to here? I'm about to fall in love with it…. +_+ (If you can figure out what the…

  • Sound Engineer: Bridging Musician And Audience

    From (the other) Eugene's blog: 표현하고자 하는 욕구가 가득찬, 숙명처럼 아낌없이, 다 펼쳐놓는 사람들이 예술가면, 그 공감대에 젖고싶어, 공감대안에서 또 자신의 자아를 찾고자 하는 욕구의 사람들이 모여든다. 음악을 표현하고,…

  • Sky – Forever

    I posted about it a long time ago, but I'll post it again, because it's the best K-pop music video ever.

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments