Titre et retour à la ligne

Alba · mars 2018

Hello !

Je galère sur la mise en forme typographique de mes titres d'articles.
Si l'on peut utiliser l'astuce de l'espace insécable (alt+espace sur mac) pour forcer une préposition ou un article
à revenir à la ligne, le raccourci alt+entrée m'envoie un aperçu de l'article. Et la balise <br /> reste affichée.

Dans cet exemple : https://imgur.com/5p4W1ge
Avec une espace insécable je me retrouve avec une ligne orpheline

[== Indéfini ==]
Joseph Gallieni, une gloire 
oubliée ?

Je pourrais ajouter une espace insécable entre chaque mot après Gallieni,
mais la ligne sera alors trop longue sur smartphone.

Bref, c'est du pinaillage, mais avez-vous déjà été confronté aux retours à la ligne dans les titres ?

bazooka07 · mars 2018

Aux titres, pas vraiment. J'essaie de faire court pour ne pas lasser le visiteur d'entrée.

Par contre, c'est un problème récurrent avec les tables.
L'astuce consiste à emballer le tout dans un container <div> et de lui appliquer la class scrollable-table qui a la règle overflow: auto.
Tu as des exemples dans la partie admin de PluXml avec les listes des articles et commentaires.

Petit bout de code pour une table plus large que la fenêtre du navigateur :

[== HTML ==]
<div class="scrollable-table">
  <table>
   ....
  </table>
</div>

[== CSS ==]
div.scrollable-table { overflow: auto; }
div.scrollable-table table td { white-space: nowrap; }

Tu dois pouvoir mettre ton titre à la place de la table.

Gzyg · mars 2018

Salut,

Le problème est surtout que, contrairement à WordPress qui le gère très bien, PluXml refuse les entités HTML ou unicode dans les titres (pas de ou de   par exemple). Ce qui oblige à renoncer à la typographie française sur des titres de blogs francophones. Ça se contourne en jouant sur la longueur des titres comme le fait remarquer bazooka07 mais c'est relou. D'autant que c'est aussi valable pour les titres des pages statiques et donc des intitulés du menu de navigation principale.

J'ai soulevé ce problème il y a déjà longtemps mais il paraît que ça pose un problème de sécurité. Je ne peux pas en juger, n'étant pas développeur, mais en tant que rédacteur et qu'intégrateur ça ne me facilite pas la tâche.

Et quand la typographie est une part importante du design, bye bye PluXml, hello WordPress. C'est quand même dommage. ]:D

à plus,

Gzyg

bazooka07 · mars 2018

Gzyg,

C'est lié partiellement à la sécurité et pas directement;

Pour afficher les titres d'articles, pages statiques, titre de page , sous-titre, ... $plxShow utilise des fonctions qui font appel à la fonction plxUtils::strCheck incluse dans PluXml qui fait à son tour appel à une pure fonction PHP htmlspecialchars qui remplacent tous les caractères &,<, >, ', " par leurs entités HTML.

Plus précisément lorsque que on représente un espace insécable dans un titre par son entité , il sera transformé en nbsp; avant affichage de la page.

Le problème se manifeste aussi par exemple lorsque qu'on veut forcer un retour à la ligne pour un sous-titre très long.

Je te propose une solution pour contrer cela :
Pour marquer un espace insécable dans un titre, on utilisera le caractère underscore "_". Pareillement, pour forcer un retour à la ligne, on utilisera le caractère "|".
Il suffit ensuite de modifier la fonction strCheck() vers la ligne 667 dans le fichier core/lib/class.plx.utils.php comme ci-dessous pour transformer ces 2 caractères en " " et "<br />" respectivement.
Il y a un petit détail à prendre en compte, la fonction plxUtils::strCheck() est utilisé côté admin et côté site. Il faut donc limiter ces transformations côté site.:

[== PHP ==]
public static function strCheck($str) {

    if(!defined('PLX_ADMIN')) {
        $replaces = array(
            '_' => '&nbsp;',
            '|' => '<br />'
        );
        return str_replace(
            array_keys($replaces),
            array_values($replaces),
            htmlspecialchars($str, ENT_QUOTES, PLX_CHARSET)
        );
    } else {
        return htmlspecialchars($str, ENT_QUOTES, PLX_CHARSET);
    }
}

Donc pour avoir un espace insécable, utiliser le caractère "_" et pour forcer un retour à la ligne, utiliser le caractère "|".
Voici quelques exemples pour le site https://kazimentou.fr :
Mon blog perso|et autres disgressions
KzInstall : PluXml prêt en quelques_secondes
Afficher des_drapeaux sur son_blog_PluXml
Installation de_Alpinelinux sur un_RaspberryPi_1B_ou_3B

Gzyg · mars 2018

Merci pour l'astuce

Mais modifier le core n'est pas une solution pérenne... Un p'tit "pull request" ?

à plus,

Gzyg

Alba · mars 2018

Ah très cool, je vais essayer ces modifs, merci !

Gzyg · mars 2018

Petit bémol d'affichage avec le workaround de bazooka07

(par exemple) le site kazimentou.fr

Dans on résultat de recherche, Google affiche : Mon blog perso|et autres disgressions (avec le | )
La barre de titre de Firefox affiche : Mon blog perso<br />et autres digressions (avec la balise <br /> bien visible).

à plus,

Gzyg

bazooka07 · mars 2018

@Gzyg,

Petit bémol au petit bémol :
J'ai fait la modif sur kazimentou.fr hier seulement et Google n'est pas repassé depuis.
Le résultat de la page de recherche est un truc en cache chez Google pas la vraie vie.

Ceci dit ta remarque est pertinente.
Il faut modifier la fonction plxShow::pageTitle().

Le souci c'est que le code que je vois pour cette fonction me pique les yeux beaucoup trop :
- la ligne "$subtitle = $this->plxMotor->aConf;" est répétée 7 ou 8 fois
- il y a toute une enfilade de if pour tester "$this->plxMotor->mode" alors qu'une instruction switch serait tout à fait pertinente
- une expression régulière qui "matche" de travers
- d'autres petits détails.

Après une bonne révision du code, on arrive à ceci :

[== PHP ==]
	public function pageTitle($format=false, $sep=';') {

		# Hook Plugins
		if(eval($this->plxMotor->plxPlugins->callHook('plxShowPageTitle'))) return;

		switch($this->plxMotor->mode) {
			case 'categorie':
				$title_htmltag = trim($this->plxMotor->aCats[$this->plxMotor->cible ]['title_htmltag']);
				$title = !empty($title_htmltag) ? $title_htmltag : $this->plxMotor->aCats[$this->plxMotor->cible]['name'];
				break;
			case 'article':
				$title_htmltag = trim($this->plxMotor->plxRecord_arts->f('title_htmltag'));
				$title = !empty($title_htmltag) ? $title_htmltag : $this->plxMotor->plxRecord_arts->f('title');
				break;
			case 'static':
				$title_htmltag =  trim($this->plxMotor->aStats[$this->plxMotor->cible ]['title_htmltag']);
				$title = !empty($title_htmltag) ? $title_htmltag : $this->plxMotor->aStats[$this->plxMotor->cible]['name'];
				break;
			case 'archives':
				if(preg_match('/^(\d{4})(\d{2})?(\d{2})?/', $this->plxMotor->cible, $capture)) {
					$year = !empty($capture[1]) ? ' '.$capture[1] : '';
					$month = !empty($capture[2]) ? ' '.plxDate::getCalendar('month', $capture[2]) : '';
					$day = !empty($capture[3]) ? ' '.plxDate::getCalendar('day', $capture[3]) : '';
					$title = L_PAGETITLE_ARCHIVES.$day.$month.$year;
				}
				break;
			case 'tags':
				$title = L_PAGETITLE_TAG.' '.$this->plxMotor->cibleName;
				break;
			case 'erreur':
				$title = $this->plxMotor->plxErreur->getMessage();
				break;
		}

		$patterns = array('_', '|');
		$subtitle = str_replace($patterns, ' ', $this->plxMotor->aConf['title']);
		if(empty($title)) {
			$title = $subtitle;
			$subtitle = str_replace($patterns, ' ', $this->plxMotor->aConf['description']);
		} else {
			$title = str_replace($patterns, ' ', $title);
		}
		$replaces = array(
			'#title'	=> $title,
			'#subtitle'	=> $subtitle
		);

		if(
			is_string($format) and
			preg_match('/'.$this->plxMotor->mode.'\s*=\s*([^'.$sep.']*)/i', $format, $capture)
		) {
			$format = trim($capture[1]);
		}
		if(empty($format)) {
			$format = '#title - #subtitle';
		}

		echo plxUtils::strCheck(str_replace(
			array_keys($replaces),
			array_values($replaces),
			$format
		));
	}

Aucun souci sur mon PC. Je le donnerai à manger à Google demain.

Comme quoi, il faut se hâter lentement d'envoyer des pull requests

jibe · mars 2018

Salut,

Merci pour l'astuce

As-tu un résultat concernant la prise en compte par Google ?

Quand on regarde le code HTML généré, on voit le <br /> à l'intérieur de la balise <h2>. Je ne sais pas comment Google réagit à ça ? C'est parfaitement correct, mais je crois bien que je n'ai jamais vu un <br /> au milieu d'un <hx> ! Du coup, dans le doute, j'ai testé

[== PHP ==]
           '|' => '</h2><h2>'

au lieu de

[== PHP ==]
           '|' => '<br />'

dans plxUtils::strCheck(). Ça fonctionne nickel, avec bien sûr une petite différence à l'affichage. Personnellement, je préfère ça.

D'ailleurs, je préférerais même que la seconde ligne fasse office de sous-titre, et donc qu'elle soit en <h3> au lieu de <h2>. Je pense savoir le faire, mais avec du code assez bourrin et à condition qu'à l'appel de strCheck() la fin de balise </h2> soit bien présente, ce dont j'ai bien du mal à m'assurer. Si quelqu'un sait le faire de manière élégante et en harmonie avec le reste du code, je prends volontiers !

Du coup, on en est où dans la hâte lente vers un pull request ? Je trouve ça quasi indispensable ! Et même, je suggérerais d'étendre les caractères de remplacement :
_ (underscore) pour l'espace insécable
-- (double tiret) pour le tiret insécable
| pour scinder en deux lignes par <br />
|| pour scinder en deux lignes de titres <h2>
||| pour scinder en deux lignes de titres <h2> puis <h3>
On peut peut-être en imaginer d'autres... ou utiliser un genre de BBcode, voire carrément interpréter du html (certaines balises seulement, bien sûr !) de la même manière...

bazooka07 · mars 2018

La fonction plxUtils::strCheck() est utilisée dans pas mal d'endroits .
Ouvre le fichier core/lib/class.plx.utils.php dans ton éditeur de code préféré et recherche toutes les occurrences de strCheck.
Strcheck n'est pas forcément appelé pour le contenu d'une balise h2.
Cela peut-être l'attribut title d'une balise ou pour une adresse mail.

Pour le tiret insécable, cela se gère avec du CSS mais le rendu selon les navigateurs est variable :
https://developer.mozilla.org/fr/docs/Web/CSS/hyphens
https://www.caniuse.com/#search=hyphen

Sinon insérer un <br> dans le sous-titre me pose problème car il est affiché en haut de la page mais aussi en bas de page où je préfère le conserver sur une seule ligne.
L'astuce consiste à mettre des espaces insécables partout sauf à l'endroit où on souhaite éventuellement un saut à la ligne et à jouer sur la largeur du container en CSS pour provoquer un saut de ligne.

Pour le pull-request j'attends pour l'envoyer. J'ai déjà poussé beaucoup de pull-requests qui sont toujours en attente de validation

Quand il y en a trop cela devient compliqué de faire un "git rebase" sans intervention manuelle .

jibe · mars 2018

Salut,

Je te laisse voir ce qui est le mieux : je débute à peine avec pluxml et tu es donc bien mieux à même que moi de juger ce qu'il faut et ne faut pas faire.

En attendant, je laisse l'astuce en place : je la trouve très pratique et simple. Si d'ici la prochaine version le pull request a été fait, ce sera super ! Sinon, pas grave, je remettrai l'astuce dans le nouveau code.

Titre et retour à la ligne

Réponses