Skip to content

Commit 82a2fa3

Browse files
committed
feature #77 Updated literal blocks to improve word breaking (javiereguiluz)
This PR was squashed before being merged into the master branch. Discussion ---------- Updated literal blocks to improve word breaking In Symfony Docs is very common to have long PHP namespaces as `<code>` elements. Firefox is the smartest browser and can break them by the backslash: ![firefox-default](https://user-images.githubusercontent.com/73419/111628417-7b920500-87f0-11eb-924b-bee27476b6d6.png) However, Chrome and others don't do that, so the result is large and ugly gaps in the text: ![chrome-default](https://user-images.githubusercontent.com/73419/111628469-89478a80-87f0-11eb-9159-9192686ff023.png) This PR proposes a *trick* to add `<wbr>` tags in some cases to help browsers. These `<wbr>` are completely transparent to users and they don't appear even if you copy+paste the text. After this PR, Chrome looks like this: ![chrome-with-wbr](https://user-images.githubusercontent.com/73419/111628584-a8deb300-87f0-11eb-8823-2fad24ad5e41.png) Commits ------- b7b3ded - 5c4dd60 Updated literal blocks to improve word breaking
2 parents b945a54 + b7b3ded commit 82a2fa3

File tree

4 files changed

+29
-5
lines changed

4 files changed

+29
-5
lines changed

src/Renderers/SpanNodeRenderer.php

+15-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,21 @@ public function link(?string $url, string $title, array $attributes = []): strin
6262
);
6363
}
6464

65-
public function isExternalUrl($url): bool
65+
public function literal(string $text): string
66+
{
67+
// some browsers can't break long <code> properly, so we inject a
68+
// `<wbr>` (word-break HTML tag) after some characters to help break those
69+
// We only do this for very long <code> (4 or more \\) to not break short
70+
// and common `<code>` such as App\Entity\Something
71+
if (substr_count($text, '\\') >= 4) {
72+
// breaking before the backslask is what Firefox browser does
73+
$text = str_replace('\\', '<wbr>\\', $text);
74+
}
75+
76+
return $this->templateRenderer->render('literal.html.twig', ['text' => $text]);
77+
}
78+
79+
private function isExternalUrl($url): bool
6680
{
6781
return u($url)->containsAny('://');
6882
}

tests/fixtures/expected/blocks/nodes/literal.html

+9-1
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,13 @@
2828
</div>
2929
</div>
3030

31+
<p>
32+
The CRUD controller of <code translate="no" class="notranslate">App\Entity\Example</code> must implement
33+
the
34+
<code translate="no" class="notranslate">EasyCorp<wbr>\Bundle<wbr>\EasyAdminBundle<wbr>\Contracts<wbr>\Controller<wbr>\CrudControllerInterface</code>
35+
,
36+
but you can also extend from the <code translate="no" class="notranslate">AbstractCrudController</code> class.
37+
</p>
38+
3139
</body>
32-
</html>
40+
</html>

tests/fixtures/expected/main/datetime.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ <h3 id="placeholder"><a class="headerlink" href="#placeholder" title="Permalink
126126
</div>
127127
<div class="section">
128128
<h3 id="format"><a class="headerlink" href="#format" title="Permalink to this headline">format</a></h3>
129-
<p><strong>type</strong>: <code translate="no" class="notranslate">string</code><strong>default</strong>: <code translate="no" class="notranslate">Symfony\Component\Form\Extension\Core\Type\DateTimeType::HTML5_FORMAT</code></p>
129+
<p><strong>type</strong>: <code translate="no" class="notranslate">string</code><strong>default</strong>: <code translate="no" class="notranslate">Symfony<wbr>\Component<wbr>\Form<wbr>\Extension<wbr>\Core<wbr>\Type<wbr>\DateTimeType::HTML5_FORMAT</code></p>
130130
<p>If the <code translate="no" class="notranslate">widget</code> option is set to <code translate="no" class="notranslate">single_text</code>, this option specifies
131131
the format of the input, i.e. how Symfony will interpret the given input
132132
as a datetime string. See <a href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" class="reference external">Date/Time Format Syntax</a>.</p>
@@ -317,4 +317,4 @@ <h2 id="url-checker-errors"><a class="headerlink" href="#url-checker-errors" tit
317317
</div>
318318

319319
</body>
320-
</html>
320+
</html>

tests/fixtures/source/blocks/nodes/literal.rst

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
here is some php code from literal::
32

43
// config/routes.php
@@ -9,3 +8,6 @@ here is some php code from literal::
98
->controller('App\Controller\CompanyController::about');
109
};
1110

11+
The CRUD controller of ``App\Entity\Example`` must implement
12+
the ``EasyCorp\Bundle\EasyAdminBundle\Contracts\Controller\CrudControllerInterface``,
13+
but you can also extend from the ``AbstractCrudController`` class.

0 commit comments

Comments
 (0)