diff options
| author | Andreas Kling <awesomekling@gmail.com> | 2019-10-16 20:32:17 +0200 |
|---|---|---|
| committer | Andreas Kling <awesomekling@gmail.com> | 2019-10-16 20:32:17 +0200 |
| commit | 6dbba6ad857e2d9554c33c4c67a21e34b2903552 (patch) | |
| tree | efb7f529ce7f3845f8a4e3de068a8f17eceeb07e | |
| parent | 2366c330e3e1aa00306970a571d19d895bd9dd95 (diff) | |
| download | serenity-6dbba6ad857e2d9554c33c4c67a21e34b2903552.zip | |
LibHTML: Implement CSS text-align: left/center/right
This was easier than I imagined; we just shift each line box to the
left based on the alignment and the remaining space on each line. :^)
| -rw-r--r-- | Base/home/anon/www/lorem.html | 3 | ||||
| -rw-r--r-- | Libraries/LibHTML/CSS/StyleValue.h | 3 | ||||
| -rw-r--r-- | Libraries/LibHTML/Layout/LayoutBlock.cpp | 27 |
3 files changed, 31 insertions, 2 deletions
diff --git a/Base/home/anon/www/lorem.html b/Base/home/anon/www/lorem.html index cb8f3e26c8..b14519a382 100644 --- a/Base/home/anon/www/lorem.html +++ b/Base/home/anon/www/lorem.html @@ -1,5 +1,8 @@ <html> <head><title>Lorem Ipsum</title></head> +<style> +p { text-align: right; } +</style> <body> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non elit dignissim, lobortis velit id, rutrum enim. Fusce urna nulla, semper in nisl consectetur, dictum dignissim felis. Vivamus mollis porttitor neque non pulvinar. Donec sollicitudin pulvinar nisi, nec vestibulum massa rutrum id. Aenean convallis tincidunt diam vel egestas. Pellentesque laoreet commodo arcu id dignissim. Etiam mattis elementum lectus, ut ultricies nibh dapibus sit amet. Curabitur sodales cursus ipsum vitae porttitor. Vestibulum ac nulla auctor, imperdiet augue accumsan, ornare eros.</p> diff --git a/Libraries/LibHTML/CSS/StyleValue.h b/Libraries/LibHTML/CSS/StyleValue.h index 1cfa3d1c3b..bd4e9b4000 100644 --- a/Libraries/LibHTML/CSS/StyleValue.h +++ b/Libraries/LibHTML/CSS/StyleValue.h @@ -14,6 +14,9 @@ namespace CSS { enum class ValueID { Invalid, VendorSpecificLink, + Center, + Left, + Right, }; } diff --git a/Libraries/LibHTML/Layout/LayoutBlock.cpp b/Libraries/LibHTML/Layout/LayoutBlock.cpp index b9bdbca280..5102b111ce 100644 --- a/Libraries/LibHTML/Layout/LayoutBlock.cpp +++ b/Libraries/LibHTML/Layout/LayoutBlock.cpp @@ -58,18 +58,41 @@ void LayoutBlock::layout_inline_children() }); int min_line_height = style().line_height(); - int content_height = 0; + // FIXME: This should be done by the CSS parser! + CSS::ValueID text_align = CSS::ValueID::Left; + auto text_align_string = style().string_or_fallback(CSS::PropertyID::TextAlign, "left"); + if (text_align_string == "center") + text_align = CSS::ValueID::Center; + else if (text_align_string == "left") + text_align = CSS::ValueID::Left; + else if (text_align_string == "right") + text_align = CSS::ValueID::Right; + for (auto& line_box : m_line_boxes) { int max_height = min_line_height; for (auto& fragment : line_box.fragments()) { max_height = max(max_height, fragment.rect().height()); } + + int x_offset = x(); + switch (text_align) { + case CSS::ValueID::Center: + x_offset += (width() - line_box.width()) / 2; + break; + case CSS::ValueID::Right: + x_offset += (width() - line_box.width()); + break; + case CSS::ValueID::Left: + default: + break; + } + for (auto& fragment : line_box.fragments()) { // Vertically align everyone's bottom to the line. // FIXME: Support other kinds of vertical alignment. - fragment.rect().set_x(x() + fragment.rect().x()); + fragment.rect().set_x(x_offset + fragment.rect().x()); fragment.rect().set_y(y() + content_height + (max_height - fragment.rect().height())); if (is<LayoutReplaced>(fragment.layout_node())) |