textile/php-textile

Images are not center aligned correctly when using '='

Closed this issue · 3 comments

autumnull commented

Prerequisites

  • Are you running the latest version of PHP-Textile?
  • $ composer update?

Expected behaviour

Image is centered horizontally (see example here)

Actual behaviour

Image is not centered horizontally, but remains left aligned (specifically, the image gets the attribute align="center" - which i think should align="middle" anyway? - but this attribute refers to vertical alignment, not horizontal alignment1).

Steps to reproduce

<?php 
      require './vendor/autoload.php';
      $parser = new \Netcarver\Textile\Parser();
      echo $parser->parse('The original Textpattern carver: !=https://textile-lang.com/carver.png!');
?>

Additional information

PHP-Textile version: v3.7.6
PHP version: PHP 8.1.4 (built: Mar 16 2022 11:32:47) (NTS)

Suggestion

I suggest replacing

align="middle"

with

style="display: block;  margin: 1em auto;"

which is the styling used on the linked example page above.

Footnotes

  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-align ↩

gocom commented

PHP-Textile defaults to XHTML output document type where the align attribute is valid.

You can set the document type to HTML5 and instead of align attribute, PHP-Textile will add classes to the image (align-center, alignment-left, alignment-right). This class can then be used to style the image in a way that fits one's use case.

For more information about how to set document type, see:
https://github.com/textile/php-textile#doctypes

autumnull commented

hi, i understand how to set the document type.

i am specifically raising this as an issue in the context of the XHTML document type, in which align="center" actually refers to the vertical alignment and not the horizontal alignment, so this is the wrong attribute to set. using the following HTML i get an incorrect result in stable firefox:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0" />
<title>Textile Example</title>
</head>
<body>
<p>The original Textpattern carver: <img align="center" alt="" src="https://textile-lang.com/carver.png" /></p>
</body>
</html>

uncentered image

As you can see, the image is center aligned vertically, not horizontally. Contrast this to the display: block; margin: 1em auto; option:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0" />
<title>Textile Example</title>
</head>
<body>
<p>The original Textpattern carver: <img style="display: block; margin: auto;" alt="" src="https://textile-lang.com/carver.png" /></p>
</body>
</html>

centered image

In addition, the W3C xhtml validator will tell you that the attribute align="center" is not valid xhtml:

image

If you really don't want to use inline style (fair objection) then another option is to extract the image from the paragraph and enclose it in <center></center> tags, like so:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0" />
<title>Textile Example</title>
</head>
<body>
<p>The original Textpattern carver: </p>
<center><img alt="" src="https://textile-lang.com/carver.png" /></center>
</body>
</html>

which produces an equally good result, but might be harder to refactor into the code. Hope this explanation helps.

  • 👍1
gocom commented

Hope this explanation helps.

Thanks, it does.

If you really don't want to use inline style

Yes, inline styles really shouldn't be hard-coded in to the output document, because they will not fit everyones usage. Same thing goes the the center element.

Best could be to have classes in the images, rather than align attribute. This could be done by decoupling the align classes from the HTML5 document type to a separate option. This also would retain backwards compatibility (old documents' output doesn't change).