https://ladigitale.dev/blog/digiread-pour-epurer-les-pages-et-les-articles

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta name="author" content="La Digitale">
7
8<!-- Dynamic title tag -->
9<title>Digiread, pour épurer les pages et les articles - Le Blog by La Digitale</title>
10
11<!-- Dynamic description tag -->
12<meta name="description" content="Digiread permet de faciliter la lecture des articles.">
13
14<!-- Include Favicon -->
15<link rel="icon" href="https://ladigitale.dev/blog/bl-themes/mediumish/img/favicon.png" type="image/png">
16
17<!-- Include Bootstrap CSS file bootstrap.css -->
18<link rel="stylesheet" type="text/css" href="https://ladigitale.dev/blog/bl-kernel/css/bootstrap.min.css?version=3.18.1">
19
20<!-- Include CSS Styles from this theme -->
21<link rel="stylesheet" type="text/css" href="https://ladigitale.dev/blog/bl-themes/mediumish/css/mediumish.css?version=3.18.1">
22
23<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
24
25<!-- Load Bludit Plugins: Site head -->
26<link rel="canonical" href="https://ladigitale.dev/blog/digiread-pour-epurer-les-pages-et-les-articles">
27<link href="/blog/bl-plugins/lightbox/css/lightbox.css" rel="stylesheet">
28<!-- Robots plugin -->
29<link rel="alternate" type="application/rss+xml" href="https://ladigitale.dev/blog/rss.xml" title="RSS Feed">
30<style>
31/* Search Plugin Styles - Theme agnostic */
32.search-results-header {
33	padding: 2rem 0;
34	margin-bottom: 1.5rem;
35	border-bottom: 1px solid rgba(0,0,0,0.1);
36}
37.search-results-header h1 {
38	font-size: 1.75rem;
39	margin: 0 0 0.5rem 0;
40}
41.search-results-header .search-query {
42	color: #0071e3;
43	font-weight: 600;
44}
45.search-results-header .search-count {
46	color: #6e6e73;
47	font-size: 0.9375rem;
48	margin: 0;
49}
50.search-no-results {
51	text-align: center;
52	padding: 3rem 1rem;
53}
54.search-no-results h2 {
55	font-size: 1.5rem;
56	margin-bottom: 0.75rem;
57}
58.search-no-results p {
59	color: #6e6e73;
60	margin-bottom: 1.5rem;
61}
62.search-no-results .search-suggestions {
63	text-align: left;
64	max-width: 400px;
65	margin: 0 auto;
66}
67.search-no-results .search-suggestions h3 {
68	font-size: 1rem;
69	margin-bottom: 0.5rem;
70}
71.search-no-results .search-suggestions ul {
72	padding-left: 1.25rem;
73	color: #6e6e73;
74}
75.search-no-results .search-suggestions li {
76	margin-bottom: 0.25rem;
77}
78.search-highlight {
79	background-color: rgba(255, 230, 0, 0.4);
80	padding: 0.1em 0.2em;
81	border-radius: 2px;
82	font-weight: 500;
83}
84.search-result-excerpt {
85	color: #1d1d1f;
86	line-height: 1.6;
87}
88.search-inline-form {
89	max-width: 400px;
90	margin: 1.5rem auto 0;
91}
92.search-inline-form input[type="search"] {
93	width: 100%;
94	padding: 0.75rem 1rem;
95	font-size: 1rem;
96	border: 1px solid rgba(0,0,0,0.1);
97	border-radius: 8px;
98}
99.search-inline-form input[type="search"]:focus {
100	outline: none;
101	border-color: #0071e3;
102	box-shadow: 0 0 0 4px rgba(0,113,227,0.1);
103}
104/* Sidebar search form styling */
105.plugin-search .search-plugin-form {
106	display: flex;
107	flex-wrap: wrap;
108	gap: 0.5rem;
109}
110.plugin-search .search-plugin-form input[type="search"] {
111	flex: 1;
112	padding: 0.5rem 0.75rem;
113	border: 1px solid rgba(0,0,0,0.15);
114	border-radius: 6px;
115	font-size: 0.9375rem;
116	max-width: 100%;
117}
118.plugin-search .search-plugin-form input[type="search"]:focus {
119	outline: none;
120	border-color: #0071e3;
121}
122.plugin-search .search-plugin-form button {
123	padding: 0.5rem 1rem;
124	margin: 0 auto;
125	background: #0071e3;
126	color: white;
127	border: none;
128	border-radius: 6px;
129	cursor: pointer;
130	font-size: 0.875rem;
131	width: 100%;
132}
133.plugin-search .search-plugin-form button:hover {
134	background: #0077ed;
135}
136/* Dark mode support */
137@media (prefers-color-scheme: dark) {
138	.search-results-header {
139		border-bottom-color: rgba(255,255,255,0.1);
140	}
141	.search-results-header .search-count,
142	.search-no-results p,
143	.search-no-results .search-suggestions ul {
144		color: #a1a1a6;
145	}
146	.search-result-excerpt {
147		color: #f5f5f7;
148	}
149	.search-highlight {
150		background-color: rgba(255, 214, 10, 0.3);
151	}
152	.search-inline-form input[type="search"],
153	.plugin-search .search-plugin-form input[type="search"] {
154		background: #1d1d1f;
155		border-color: rgba(255,255,255,0.1);
156		color: #f5f5f7;
157	}
158}
159/* Accessibility - screen reader only class */
160.sr-only, .visually-hidden {
161	position: absolute;
162	width: 1px;
163	height: 1px;
164	padding: 0;
165	margin: -1px;
166	overflow: hidden;
167	clip: rect(0, 0, 0, 0);
168	white-space: nowrap;
169	border: 0;
170}
171</style>

171<script defer src="https://umami.ladigitale.dev/stats.js" data-website-id="16251ec8-c115-473f-8907-adb8bcd0b40e"></script>

171
172</head>
173<body>
174
175	<!-- Load Bludit Plugins: Site Body Begin -->
176	
177	<!-- Navbar -->
178	<!-- Begin Nav
179================================================== -->
180
181<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top mediumnavigation">
182<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
183<span class="navbar-toggler-icon"></span>
184</button>
185<div class="container">
186	<!-- Begin Logo -->
187	<a class="navbar-brand" href="https://ladigitale.dev/blog/">
188	<img src="https://ladigitale.dev/blog/bl-themes/mediumish/img/logo.png" alt="logo">
189	</a>
190	<!-- End Logo -->
191	<div class="collapse navbar-collapse" id="navbarsExampleDefault">
192		<!-- Begin Menu -->
193		<ul class="navbar-nav ml-auto">
194			<li class="nav-item ">
195				<a class="nav-link" href="/blog/categorie/articles">/articles</a>
196			</li>
197			
198			<li class="nav-item ">
199				<a class="nav-link" href="/blog/categorie/la-digitale">/la-digitale</a>
200			</li>
201			
202			<li class="nav-item ">
203				<a class="nav-link" href="/blog/categorie/outils-libres">/outils-libres</a>
204			</li>
205			
206			<li class="nav-item ">
207				<a class="nav-link" href="/blog/a-propos">/a-propos</a>
208			</li>
209		</ul>
210		<!-- End Menu -->
211				<div class="form-inline my-2 my-lg-0">
212			<input id="search-input" class="form-control mr-sm-2" type="text" placeholder="Rechercher...">
213			<span onClick="searchNow()" class="search-icon"><svg class="svgIcon-use" width="25" height="25" viewBox="0 0 25 25"><path d="M20.067 18.933l-4.157-4.157a6 6 0 1 0-.884.884l4.157 4.157a.624.624 0 1 0 .884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"></path></svg></span>
214			

214<script>
215				function searchNow() {
216					var searchURL = "https://ladigitale.dev/blog/search/";
217					window.open(searchURL + document.getElementById("search-input").value, "_self");
218				}
219				var elem = document.getElementById('search-input');
220				elem.addEventListener('keypress', function(e){
221					if (e.keyCode == 13) {
222						searchNow();
223					}
224				});
225			</script>

225
226		</div>
227			</div>
228</div>
229</nav>
230<!-- End Nav
231================================================== -->
232
233	<!-- Content -->
234	<!-- Begin Article
235================================================== -->
236<div class="container">
237	<div class="row">
238
239		<!-- Begin Post -->
240		<div class="col-md-9 col-xs-12" style="margin: auto;">
241
242			<!-- Load Bludit Plugins: Page Begin -->
243			
244			<div class="mainheading">
245				<h1 class="posttitle">Digiread, pour épurer les pages et les articles</h1>
246				<div class="wrapfooter">
247					<span class="author-meta">
248						<span class="post-name">par EZ</span> <span class="post-date">le 16 juin 2021</span><span class="dot"></span><span class="post-date">modifié le 9 mars 2025</span>						<!--<span class="dot"></span><span class="post-read">Temps approximatif de lecture : 3 minutes</span>-->
249					</span>
250				</div>
251			</div>
252
253			<!-- Begin Cover Image -->
254						<img class="featured-image img-fluid" src="https://ladigitale.dev/blog/bl-content/uploads/pages/c3d506cef72acd7994d6d5605cc71574/digiread.png" alt="Digiread, pour épurer les pages et les articles">
255						<!-- End Cover Image -->
256
257			<!-- Begin Post Content -->
258			<div class="article-post">
259				<p>Reposant sur la librairie javascript <a href="https://github.com/mozilla/readability" target="_blank" rel="noopener"><strong>Readability</strong></a> de Mozilla (utilisée dans le <em>mode lecture</em> du navigateur Mozilla Firefox), <a href="https://ladigitale.dev/digiread/#/" target="_blank" rel="noopener"><strong>Digiread</strong></a> reprend le concept de <a href="https://ladigitale.dev/digiplay/#/" target="_blank" rel="noopener"><strong>Digiplay</strong></a>, cette fois appliqué aux contenus textuels.</p>
260<p><strong>Digiread</strong> permet ainsi de purifier une page ou un article en ligne et de proposer un <strong>environnement de lecture minimaliste</strong> qui élimine les publicités et autres éléments non désirables.</p>
261<p>Idéal pour se focaliser sur le contenu !</p>
262<p><strong>Un exemple </strong>avec un article du blog de La Digitale (dont l'aspect est déjà minimaliste par défaut, mais bon...) : <a href="https://ladigitale.dev/digiread/#/a/60c9e2097e342" target="_blank" rel="noopener"><strong>https://ladigitale.dev/digiread/#/a/60c9e2097e342</strong></a></p>
263<p><img src="https://ladigitale.dev/blog/bl-content/uploads/pages/c3d506cef72acd7994d6d5605cc71574/article-digiread.png" alt=""></p>
264<hr>
265<p><strong>Les outils de La Digitale sont mis à disposition gratuitement et financés de manière participative.</strong> Si vous trouvez ces outils utiles, vous pouvez <b>soutenir le projet </b>sur <a href="https://opencollective.com/ladigitale" target="_blank" rel="noopener"><strong>Open Collective</strong></a>, <a href="https://liberapay.com/ladigitale/" target="_blank" rel="noopener"><strong>Liberapay</strong></a> ou <a href="https://donate.stripe.com/4gweWveqf2sc6KAcMO" target="_blank" rel="noopener"><strong>Stripe</strong></a> pour assurer sa pérennité 😉.</p>
266<p>Si vous avez des questions, des suggestions (ou simplement pour dire bonjour, ça fait toujours plaisir !), n'hésitez pas à <a href="https://ladigitale.dev/#contact" target="_blank" rel="noopener"><strong>m'écrire</strong></a> ou à publier un message sur <a href="https://digipad.app/p/8/64dab892e6eab" target="_blank" rel="noopener"><strong>Le mur de La Digitale</strong></a>.</p>
267<p>En outre, voici des <strong><a href="https://digipad.app/p/4707/35503ca112661" target="_blank" rel="noopener">articles complémentaires et des tutoriels</a></strong>, d<a href="https://digipad.app/p/8/64dab892e6eab" target="_blank" rel="noopener"><strong></strong></a>'autres <a href="https://ladigitale.dev/contribuer.html" target="_blank" rel="noopener"><strong>idées pour contribuer au projet</strong></a> et un récapitulatif des <a href="https://ladigitale.dev/liens/" target="_blank" rel="noopener"><strong>liens utiles</strong></a>.</p>
268<p>Librement,</p>
269<p>EZ</p>			</div>
270			<!-- End Post Content -->
271
272			<!-- Begin Tags -->
273						<!-- End Tags -->
274
275			<!-- Load Bludit Plugins: Page End -->
276			
277		</div>
278		<!-- End Post -->
279
280	</div>
281
282	<!-- Begin Footer
283	================================================== -->
284	<div class="footer">
285		<p class="pull-right">
286			2026 - <a href="https://ladigitale.dev/" target="_blank">La Digitale</a> - <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr" target="_blank" rel="noreferrer">CC BY-NC-SA</a> - <a href="https://ladigitale.dev/blog/rss.xml" target="_blank">RSS</a>
287		</p>
288		<div class="clearfix">
289		</div>
290	</div>
291	<!-- End Footer
292	================================================== -->
293</div>
294<!-- End Article
295================================================== -->
296
297	<!-- Javascript -->
298	

298<script src="https://ladigitale.dev/blog/bl-kernel/js/jquery.min.js?version=3.18.1"></script>

298

299<script  src="https://ladigitale.dev/blog/bl-themes/mediumish/js/tether.min.js?version=3.18.1"></script>

299

300<script  src="https://ladigitale.dev/blog/bl-kernel/js/bootstrap.bundle.min.js?version=3.18.1"></script>

300
301
302	<!-- Load Bludit Plugins: Site Body End -->
303	

304<script src="/blog/bl-plugins/lightbox/js/lightbox.js"></script>

304
305
306</body>
307</html>