Легенды и заголовки

Од­на­ж­ды в де­каб­ре я ре­шил по­смот­реть, что же мож­но сде­лать с эле­мен­том leg­end. Я хо­тел по­дви­гать его внут­ри ро­ди­тель­ско­го фил­дсе­та, но мне не хо­те­лось це­ли­ком сби­вать сти­ли: у фил­дсе­та с ле­ген­дой есть уни­каль­ное по­ве­де­ние —под ле­ген­ду ре­зер­ви­ру­ет­ся пу­стое про­странство.

В ито­ге, пу­тём пары ха­ков, я сде­лал несколь­ко ва­ри­ан­тов: с ле­ген­дой спра­ва, цен­три­ро­ван­ной и даже с дву­мя ле­ген­да­ми с раз­ных сторон.

Про­ще все­го ока­за­лось с пер­вым ва­ри­ан­том: что­бы спо­зи­ци­о­ни­ро­вать ле­ген­ду впра­во до­ста­точ­но при­ме­нить на ро­ди­те­ле di­rec­tion: rtl, ну и по­том не за­быть для де­тей вос­ста­но­вить его зна­че­ние в ltr.

Для цен­три­ро­ван­но­го и двой­но­го ва­ри­ан­тов при­ш­лось ис­поль­зо­вать до­пол­ни­тель­ные эле­мен­ты и рас­тя­ги­вать ле­ген­ду на всю ши­ри­ну, эму­ли­руя гра­ни­цу до­пол­ни­тель­ны­ми эле­мен­та­ми. Мож­но было бы ис­поль­зо­вать вме­сто неко­то­рых из них псев­до­эле­мен­ты, но в ка­ких-то бра­у­зе­рах были с этим про­бле­мы в дан­ном кон­тек­сте, так что я ре­шил про­сто до­ба­вить пару лиш­них бло­ков. В ито­ге по­лу­чи­лось что-то такое:

А вот бо­лее про­стой при­мер с за­го­лов­ка­ми и ли­ни­я­ми по кра­ям. Ос­нов­ной смысл за­клю­ча­ет­ся в ис­поль­зо­ва­нии толь­ко од­но­го эле­мен­та и то, что гра­ни­цы тут до­ста­точ­но «чест­ные» —если под за­го­ло­вок по­ло­жить фон, то он бу­дет нор­маль­но про­све­чи­вать. То­гда как в по­хо­жих ме­то­дах, ко­то­рые я ви­дел, обыч­но при­ме­ня­ют пе­ре­кры­тие цен­траль­ным бло­ком ли­нии под ним.

К со­жа­ле­нию, для мно­го­строч­ных за­го­лов­ков всё рав­но ну­жен лиш­ний блок, но и в этом слу­чае «чест­ность» про­све­тов оста­ёт­ся. Ну и всё до­воль­но хо­ро­шо де­гра­ди­ру­ет для ста­рых бра­у­зе­ров. Вот даб­б­лет это­го при­мера:

Hello!

Here are the centered headings with horizontal lines.

They are one-lined by default, but if it needs to be multiline, then you can add an extra span.

Multiline heading
with an extra wrapping span

Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown.

↑ Here you can see one-lined heading, with text-overflow: ellipsis. Since it's too long, the horizontal lines cannot be seen.