diff --git a/.github/workflows/predeploy.yml b/.github/workflows/predeploy.yml index 165f79587f3..1458151fcbb 100644 --- a/.github/workflows/predeploy.yml +++ b/.github/workflows/predeploy.yml @@ -14,7 +14,7 @@ name: Predeploy script env: # Update periodically from https://www.princexml.com/latest/ - PRINCE_PACKAGE: 'prince_20250207-1_ubuntu24.04_amd64.deb' + PRINCE_PACKAGE: 'prince_16.1-1_ubuntu24.04_arm64.deb' on: workflow_dispatch: diff --git a/src/content/en/2021/caching.md b/src/content/en/2021/caching.md index d3d7922d647..9545a9ba946 100644 --- a/src/content/en/2021/caching.md +++ b/src/content/en/2021/caching.md @@ -119,40 +119,43 @@ When using the `Cache-Control` header, you specify one or more _directives_—pr Below is a table showing the most common `Cache-Control` directives: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DirectiveDescription
max-ageIndicates the number of seconds that a resource can be cached for relative to the current time. For example, max-age=86400.
publicIndicates that any cache can store the response, including the browser and the CDN. This is assumed by default.
no-cacheA cached resource must be revalidated before its use, via a conditional request, even if it is not marked as stale.
must-revalidateA stale cached entry must be revalidated before its use, via a conditional request.
no-storeIndicates that the response must not be cached.
privateThe response is intended for a specific user and should not be stored by shared caches such as CDNs.
immutableIndicates that the cached entry will never change during its TTL, and that revalidation is not necessary.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DirectiveDescription
max-ageIndicates the number of seconds that a resource can be cached for relative to the current time. For example, max-age=86400.
publicIndicates that any cache can store the response, including the browser and the CDN. This is assumed by default.
no-cacheA cached resource must be revalidated before its use, via a conditional request, even if it is not marked as stale.
must-revalidateA stale cached entry must be revalidated before its use, via a conditional request.
no-storeIndicates that the response must not be cached.
privateThe response is intended for a specific user and should not be stored by shared caches such as CDNs.
immutableIndicates that the cached entry will never change during its TTL, and that revalidation is not necessary.
+
{{ figure_link(caption="Cache-Control directives.") }}
+
{{ figure_markup( image="cache-control-directives.png", diff --git a/src/content/en/2021/ecommerce.md b/src/content/en/2021/ecommerce.md index a8e7d98da27..0fe7bf000d2 100644 --- a/src/content/en/2021/ecommerce.md +++ b/src/content/en/2021/ecommerce.md @@ -181,7 +181,7 @@ As we continue down the leaderboard, there are few surprises in this space. Quit It is hard to compare the total number of ecommerce sites found across years. As described earlier, this is because the ability to detect whether a site is ecommerce has been improved substantially. In part through the use of secondary signals such as Google Analytics Enhanced Ecommerce integration. -So instead, [last year's report](./../2020/ecommerce#covid-19-impact-on-ecommerce) focused on a small number of platforms to see how their use had changed. The early signs in the first half of 2020 were that there were measurable and notable increases in Shopify and WooCommerce use. The growth was in the region of 20% between January 2020 and July 2020 while other platforms like Magento did not see the same growth. These platforms are known for their low entry costs and ease of use, while Magento is not. +So instead, [last year's report](../2020/ecommerce#covid-19-impact-on-ecommerce) focused on a small number of platforms to see how their use had changed. The early signs in the first half of 2020 were that there were measurable and notable increases in Shopify and WooCommerce use. The growth was in the region of 20% between January 2020 and July 2020 while other platforms like Magento did not see the same growth. These platforms are known for their low entry costs and ease of use, while Magento is not. Fast-forward to 2021, people and businesses around the world have continued to adapt. Ecommerce in the US in 2020 saw revenue growth of 32.4% according to a report by the Commerce Department. In the UK, the Office of National Statistics reported a 46% growth. diff --git a/src/content/en/2021/security.md b/src/content/en/2021/security.md index c5c05abcb5f..f49537a4364 100644 --- a/src/content/en/2021/security.md +++ b/src/content/en/2021/security.md @@ -303,7 +303,7 @@ We see that 58.5% of all first-party cookies with a `SameSite` attribute have th Cookie prefixes `__Host-` and `__Secure-` help mitigate attacks to override the session cookie information for a session fixation attack. `__Host-` helps in domain locking a cookie by requiring the cookie to also have `Secure` attribute, `Path` attribute set to `/`, not have `Domain` attribute and to be sent from a secure origin. `__Secure-` on the other hand requires the cookie to only have `Secure` attribute and to be sent from a secure origin. -​
+
diff --git a/src/content/en/2022/performance.md b/src/content/en/2022/performance.md index b5054dbe667..c0b477e0356 100644 --- a/src/content/en/2022/performance.md +++ b/src/content/en/2022/performance.md @@ -676,7 +676,7 @@ There are other, more direct ways site owners can improve their CLS. Setting `he Effectively all websites have "good" FID for desktop users, and this trend has held firm over the years. Mobile FID performance is also exceptionally fast, with 92% of websites having "good" FID, a slight improvement over last year. -While it's great that so many websites have good FID experiences, developers need to be careful not to become too complacent. Google has been experimenting with a new responsiveness metric that could end up replacing FID, which is especially important because sites tend to perform much worse on [this new metric](./#interaction-to-next-paint-inp) than FID. +While it's great that so many websites have good FID experiences, developers need to be careful not to become too complacent. Google has been experimenting with a new responsiveness metric that could end up replacing FID, which is especially important because sites tend to perform much worse on [this new metric](#interaction-to-next-paint-inp) than FID. ### FID metadata and best practices diff --git a/src/content/en/2024/accessibility.md b/src/content/en/2024/accessibility.md index e9553934b61..ba5fa8c2e8a 100644 --- a/src/content/en/2024/accessibility.md +++ b/src/content/en/2024/accessibility.md @@ -371,7 +371,7 @@ Tables present data and relationships using two dimensions. For accessibility, t - + diff --git a/src/content/en/2024/security.md b/src/content/en/2024/security.md index 8c641b004cb..a1147967a19 100644 --- a/src/content/en/2024/security.md +++ b/src/content/en/2024/security.md @@ -1425,7 +1425,7 @@ For CMS's that can be easily self-hosted such as Plone or Wagtail, it is more di Large websites often have a high number of visitors and registered users, of which they might store highly sensitive data. This means they likely attract more attackers and are thus more prone to targeted attacks. Additionally, when an attack succeeds, these websites could be fined or sued, costing them money and/or reputational damage. Therefore, it can be expected that popular websites invest more in their security to secure their users. {{ figure_markup( - image="security-headeers-by-rank.png", + image="security-headers-by-rank.png", caption="Security header adoption by website rank according to the April 2024 CrUX.", description="Bar chart showing in top 1,000 sites, 64% have XFO, 60% have HSTS and 56% have X-Content-Type-Options headers. In top 10,000, 54% have XFO, 46% have HSTS and 54% have X-Content-Type-Options headers. In top 100,000, 51% have XFO, 42% have HSTS and 50% have X-Content-Type-Options headers. In top 1,000,000, 45% have XFO, 36% have HSTS and 47% have X-Content-Type-Options headers. Among all sites, 29% have XFO, 31% have HSTS and 43% have X-Content-Type-Options.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTxTTMlFFSMT3mZgw2awA0wl3F68gzU1OLuyMaZXscSFq-Pa5ev_qTXx8ZaGEOl_ox_aHsraAGMXZ9Y/pubchart?oid=256464807&format=interactive", diff --git a/src/content/en/2024/sustainability.md b/src/content/en/2024/sustainability.md index 74c4c9b0b7d..4364823fe39 100644 --- a/src/content/en/2024/sustainability.md +++ b/src/content/en/2024/sustainability.md @@ -27,7 +27,7 @@ doi: 10.5281/zenodo.14065377 ## Introduction -In the current chapter, we will rely as much as possible on [the 2022 Sustainability chapter](./../2022/sustainability). If you haven't yet, you should read it right now. Yes, recycling/reusing is a major part of sustainability. +In the current chapter, we will rely as much as possible on [the 2022 Sustainability chapter](../2022/sustainability). If you haven't yet, you should read it right now. Yes, recycling/reusing is a major part of sustainability. Since the 2022 Almanac, the field of digital sustainability has advanced considerably. That said, it is very much in its infancy, as this is a complex problem. We cannot know, with absolute certainty, what the full effects of our digital lives are on our physical planet. What we can be confident in is that the full impacts are bigger than generally accounted for. Water, land, rare minerals, and electricity are all consumed by our "clean" digital interfaces, and toxic waste is often produced. @@ -630,7 +630,7 @@ Automatically preloading videos is a concern for web sustainability. This practi sql_file="video_preload_values.sql" ) }} -Comparing the usage of the preload attribute between [2022](./../2022/sustainability) and 2024, we observe some changes. The percentage of websites not using preload has slightly decreased, from 58% to 55% on desktop and from 60% to 56% on mobile. This shift suggests a small increase in the use of preload attributes, which could have implications for sustainability. +Comparing the usage of the preload attribute between [2022](../2022/sustainability) and 2024, we observe some changes. The percentage of websites not using preload has slightly decreased, from 58% to 55% on desktop and from 60% to 56% on mobile. This shift suggests a small increase in the use of preload attributes, which could have implications for sustainability. It's important to remember that the preload attribute only has three valid values: none, auto, and metadata (default). Using the preload attribute with no value or an incorrect value may be interpreted as 'metadata', which can still involve loading up to 3% of the video to retrieve metadata. From a sustainability standpoint, 'none' remains the most environmentally friendly option. @@ -653,7 +653,7 @@ It's important to note that the autoplay attribute can override preload settings sql_file="video_autoplay_values.sql" ) }} -Comparing the usage of autoplay between [2022](./../2022/sustainability) and 2024, we see some notable changes. The percentage of websites explicitly not using autoplay has decreased, from 53% to 45% on desktop and from 53% to 45% on mobile. This could be a concern for sustainability efforts. Also, we notice a slight increase for websites using an empty value for this attribute, which also triggers autoplay (and is bad for sustainability). +Comparing the usage of autoplay between [2022](../2022/sustainability) and 2024, we see some notable changes. The percentage of websites explicitly not using autoplay has decreased, from 53% to 45% on desktop and from 53% to 45% on mobile. This could be a concern for sustainability efforts. Also, we notice a slight increase for websites using an empty value for this attribute, which also triggers autoplay (and is bad for sustainability). It's crucial to remember that autoplay is a Boolean attribute, meaning its presence, even with an empty value, triggers autoplay behavior. The combined percentage of explicit autoplay usage (including `autoplay`, `TRUE` and other values) has remained relatively stable, around 8% for both desktop and mobile. @@ -888,7 +888,7 @@ For further information, refer to: sql_file="stylesheet_count.sql" ) }} -When we compare this year's data to [2022 data](./../2022/sustainability) we can see the following: +When we compare this year's data to [2022 data](../2022/sustainability) we can see the following: 1. Increase in inline stylesheet usage: - Desktop: from 25% in 2022 to 31% in 2024. - Mobile: from 25% in 2022 to 32% in 2024. diff --git a/src/content/en/2025/pwa.md b/src/content/en/2025/pwa.md index 3a9f92c0937..0db64909e2e 100644 --- a/src/content/en/2025/pwa.md +++ b/src/content/en/2025/pwa.md @@ -161,7 +161,8 @@ Let's examine how individual members rate in the totality of manifest files scan - + + diff --git a/src/content/ja/2019/cdn.md b/src/content/ja/2019/cdn.md index 7ddb0ee605a..f2af9fb7720 100644 --- a/src/content/ja/2019/cdn.md +++ b/src/content/ja/2019/cdn.md @@ -332,7 +332,7 @@ CDNプロバイダーには、汎用CDNと目的別CDNの2つのカテゴリが
All Sites
desktop mobile desktop
Manifest fieldSitesDesktopMobile
-
表5のデータを示すツリーマップグラフ。
+
{{ figure_link(caption="表5のデータを示すツリーマップグラフ。") }}
上位CDNプロバイダーの構成は、サードパーティのリソースに対して劇的に変化します。サードパーティのリソースをホストするCDNが頻繁に監視されるだけでなく、Facebook、Twitter、Googleなどの目的に合ったCDNプロバイダーも増加しています。 diff --git a/src/content/ja/2021/caching.md b/src/content/ja/2021/caching.md index 20b6ff3b043..7773d286c84 100644 --- a/src/content/ja/2021/caching.md +++ b/src/content/ja/2021/caching.md @@ -119,40 +119,43 @@ CDNとブラウザの両方において、HTTPヘッダーは開発者がリソ 以下は、もっとも一般的な `Cache-Control` ディレクティブを示した表です。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ディレクティブ説明
max-age現在時刻を基準として、リソースのキャッシュが可能な秒数を示す。たとえば、max-age=86400などです。
publicブラウザや CDN を含む、任意のキャッシュが応答を保存できることを示します。これはデフォルトで想定されています。
no-cacheキャッシュされたリソースは、たとえそれが古いとマークされていなくても、使用前に条件付きリクエストによって再検証されなければならない。
must-revalidateキャッシュされた古いエントリは、使用前に条件付きリクエストによって再検証されなければならない。
no-storeレスポンスがキャッシュされてはならないことを示す。
privateこのレスポンスは特定のユーザーを対象としたものであり、CDNなどの共有キャッシュに保存されるべきものではありません。
immutableキャッシュされたエントリがその TTL の間、決して変更されず、再バリデーションが必要ないことを示す。
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ディレクティブ説明
max-age現在時刻を基準として、リソースのキャッシュが可能な秒数を示す。たとえば、max-age=86400などです。
publicブラウザや CDN を含む、任意のキャッシュが応答を保存できることを示します。これはデフォルトで想定されています。
no-cacheキャッシュされたリソースは、たとえそれが古いとマークされていなくても、使用前に条件付きリクエストによって再検証されなければならない。
must-revalidateキャッシュされた古いエントリは、使用前に条件付きリクエストによって再検証されなければならない。
no-storeレスポンスがキャッシュされてはならないことを示す。
privateこのレスポンスは特定のユーザーを対象としたものであり、CDNなどの共有キャッシュに保存されるべきものではありません。
immutableキャッシュされたエントリがその TTL の間、決して変更されず、再バリデーションが必要ないことを示す。
+
{{ figure_link(caption="Cache-Controlディレクティブ。") }}
+
{{ figure_markup( image="cache-control-directives.png", diff --git a/src/content/ja/2021/ecommerce.md b/src/content/ja/2021/ecommerce.md index 7a517d803b0..bece5454466 100644 --- a/src/content/ja/2021/ecommerce.md +++ b/src/content/ja/2021/ecommerce.md @@ -181,7 +181,7 @@ Salesforce Commerce CloudとSAP Commerceは、同程度の数のeコマースサ 年度をまたいで発見されたECサイトの総数を比較することは困難です。前述したように、ECサイトかどうかを検出する能力が大幅に向上したためです。Google Analytics Enhancedeコマースインテグレーションのような二次的なシグナルの使用によるところもあります。 -そこで、代わりに[昨年のレポート](./../2020/ecommerce#COVID-19のEコマースへの影響)では、少数のプラットフォームに焦点を当て、その利用状況がどのように変化したかを確認しました。2020年前半の初期の兆候として、ShopifyとWooCommerceの利用が測定可能で顕著に増加していることが分かりました。Magentoなどの他のプラットフォームが同じような伸びを見せなかったのに対し、2020年1月から2020年7月にかけて20%台の伸びを見せました。これらのプラットフォームは参入コストの低さや使いやすさで知られていますがMagentoは、そうではありません。 +そこで、代わりに[昨年のレポート](../2020/ecommerce#COVID-19のEコマースへの影響)では、少数のプラットフォームに焦点を当て、その利用状況がどのように変化したかを確認しました。2020年前半の初期の兆候として、ShopifyとWooCommerceの利用が測定可能で顕著に増加していることが分かりました。Magentoなどの他のプラットフォームが同じような伸びを見せなかったのに対し、2020年1月から2020年7月にかけて20%台の伸びを見せました。これらのプラットフォームは参入コストの低さや使いやすさで知られていますがMagentoは、そうではありません。 2021年に向けて、世界中の人々や企業は適応を続けています。2020年の米国における電子商取引は、商務省の報告書によると、32.4%の収益成長率を示しました。英国では、Office of National Statistics報告 が46%の伸びを示しています。 diff --git a/src/content/ja/2021/security.md b/src/content/ja/2021/security.md index d0a941e6c89..7675a90c5e2 100644 --- a/src/content/ja/2021/security.md +++ b/src/content/ja/2021/security.md @@ -303,7 +303,7 @@ Cookieを適切に保護しないと、攻撃者はセッションを乗っ取 クッキープレフィックス `__Host-` と `__Secure-` は、セッションフィクスチャ攻撃 のためにセッションクッキーの情報を上書きする攻撃を軽減するのに役立ちます。`__Host-` はクッキーをドメインロックするのに役立ちます。クッキーは `Secure` 属性と `Path` 属性を `/` に設定し、 `Domain` 属性を持たず、安全な場所から送信される必要があります。一方、`__Secure-`はクッキーが `Secure` 属性のみを持ち、安全な場所から送信されることを要求します。 -​
+
diff --git a/src/content/ja/2022/performance.md b/src/content/ja/2022/performance.md index b904f09f7ca..989bed1b64f 100644 --- a/src/content/ja/2022/performance.md +++ b/src/content/ja/2022/performance.md @@ -676,7 +676,7 @@ CLSは2022年にもっとも改善されたCWVメトリックであり、全体 事実上すべてのウェブサイトがデスクトップユーザーに対して「良好」なFIDを持っており、この傾向は年を経ても変わっていません。モバイルのFIDパフォーマンスも非常に高速で、92%のウェブサイトが「良好」なFIDを持っており、昨年に比べてわずかに改善されています。 -これほど多くのウェブサイトが良好なFID体験を提供しているのは素晴らしいことですが、開発者は自己満足に陥らないよう注意が必要です。Googleは新しい応答性メトリックの実験を行っており、それがFIDに取って代わる可能性があります。とくに、サイトは[FIDに比べてこの新しいメトリック](./#インタラクションから次の描画)でかなり悪いパフォーマンスを示す傾向にあるため、これはとくに重要です。 +これほど多くのウェブサイトが良好なFID体験を提供しているのは素晴らしいことですが、開発者は自己満足に陥らないよう注意が必要です。Googleは新しい応答性メトリックの実験を行っており、それがFIDに取って代わる可能性があります。とくに、サイトは[FIDに比べてこの新しいメトリック](#インタラクションから次の描画-inp)でかなり悪いパフォーマンスを示す傾向にあるため、これはとくに重要です。 ### FIDのメタデータとベストプラクティス diff --git a/src/content/ja/2024/accessibility.md b/src/content/ja/2024/accessibility.md index f3df78fe458..65a46b884df 100644 --- a/src/content/ja/2024/accessibility.md +++ b/src/content/ja/2024/accessibility.md @@ -371,7 +371,7 @@ WCAGは、すべてのサイト - + diff --git a/src/content/ja/2024/http.md b/src/content/ja/2024/http.md index 9f5e7b8b6cf..4cf5fb46ca6 100644 --- a/src/content/ja/2024/http.md +++ b/src/content/ja/2024/http.md @@ -201,7 +201,7 @@ Web Almanacデータセットで実際のHTTP/3のサポートを正しく把握 しかし、SVCBに関する完全な議論はここでは時間がかかりすぎるため、新しいHTTPSレコードを介してHTTP/3のサポートをアナウンスする方法にのみ焦点を当てます。他のブログ投稿ドキュメント詳細がより広いアプリケーションについて書かれているものがたくさんあるためです。実際のHTTPSレコードの例を見てみましょう。 {{ figure_markup( - image="dns-httpshttps-example.jpg", + image="dns-https-example.jpg", caption="DNS HTTPSリソースレコードの例。", description="`dig`コマンドラインツールからのスクリーンショット。DNS HTTPSレコードが`alpn` `h3`と`h2`をリストし、`blog.cloudflare.com`のipv4hintとipv6hintの両方を提供していることを示しています。", width=1415, diff --git a/src/content/ja/2024/sustainability.md b/src/content/ja/2024/sustainability.md index 3511132f5e8..38d9ef30269 100644 --- a/src/content/ja/2024/sustainability.md +++ b/src/content/ja/2024/sustainability.md @@ -27,7 +27,7 @@ doi: 10.5281/zenodo.14065377 ## 序章 -この章では、可能な限り[2022年のサステナビリティの章](./../2022/sustainability)を参考にします。まだ読んでいない方は、今すぐ読んでください。そう、リサイクルや再利用はサステナビリティの重要な一部なのです。 +この章では、可能な限り[2022年のサステナビリティの章](../2022/sustainability)を参考にします。まだ読んでいない方は、今すぐ読んでください。そう、リサイクルや再利用はサステナビリティの重要な一部なのです。 2022年のAlmanac以降、デジタルサステナビリティの分野はかなり進歩しました。とはいえ、これは複雑な問題であるため、まだ初期段階にあります。私たちのデジタルライフが物理的な地球に与える影響の全容を、絶対的な確実性をもって知ることはできません。私たちが確信できるのは、その影響の全容は一般的に考えられているよりも大きいということです。水、土地、希少鉱物、そして電力はすべて、私たちの「クリーンな」デジタルインターフェースによって消費され、有毒廃棄物もしばしば生産されます。 @@ -630,7 +630,7 @@ CSSには、アニメーションやトランジションなど、追加の排 sql_file="video_preload_values.sql" ) }} -[2022年](./../2022/sustainability)と2024年のプリロード属性の使用状況を比較すると、いくつかの変化が見られます。プリロードを使用していないウェブサイトの割合は、デスクトップで58%から55%に、モバイルで60%から56%にわずかに減少しました。この変化は、プリロード属性の使用がわずかに増加したことを示唆しており、持続可能性に影響を与える可能性があります。 +[2022年](../2022/sustainability)と2024年のプリロード属性の使用状況を比較すると、いくつかの変化が見られます。プリロードを使用していないウェブサイトの割合は、デスクトップで58%から55%に、モバイルで60%から56%にわずかに減少しました。この変化は、プリロード属性の使用がわずかに増加したことを示唆しており、持続可能性に影響を与える可能性があります。 プリロード属性には、none、auto、metadata(デフォルト)の3つの有効な値しかないことを覚えておくことが重要です。値なしまたは不正な値でプリロード属性を使用すると、「metadata」と解釈される可能性があり、メタデータを取得するために動画の最大3%を読み込む可能性があります。持続可能性の観点から、「none」がもっとも環境に優しいオプションであり続けます。 @@ -653,7 +653,7 @@ CSSには、アニメーションやトランジションなど、追加の排 sql_file="video_autoplay_values.sql" ) }} -[2022年](./../2022/sustainability)と2024年の自動再生の使用状況を比較すると、いくつかの注目すべき変化が見られます。自動再生を明示的に使用していないウェブサイトの割合は、デスクトップで53%から45%に、モバイルで53%から45%に減少しました。これは、持続可能性への取り組みにとって懸念事項となる可能性があります。また、この属性に空の値を使用するウェブサイトがわずかに増加していることに気づきます。これも自動再生をトリガーし(持続可能性には悪影響です)、持続可能性には悪影響です。 +[2022年](../2022/sustainability)と2024年の自動再生の使用状況を比較すると、いくつかの注目すべき変化が見られます。自動再生を明示的に使用していないウェブサイトの割合は、デスクトップで53%から45%に、モバイルで53%から45%に減少しました。これは、持続可能性への取り組みにとって懸念事項となる可能性があります。また、この属性に空の値を使用するウェブサイトがわずかに増加していることに気づきます。これも自動再生をトリガーし(持続可能性には悪影響です)、持続可能性には悪影響です。 自動再生はブール属性であり、その存在は、空の値であっても、自動再生動作をトリガーすることを覚えておくことが重要です。明示的な自動再生の使用(`autoplay`、`TRUE`、その他の値を含む)の合計割合は、デスクトップとモバイルの両方で約8%で比較的安定しています。 @@ -888,7 +888,7 @@ JavaScriptとCSSをHTMLに直接インライン化する慣行は、HTMLファ sql_file="stylesheet_count.sql" ) }} -今年のデータを[2022年のデータ](./../2022/sustainability)と比較すると、次のことがわかります。 +今年のデータを[2022年のデータ](../2022/sustainability)と比較すると、次のことがわかります。 1. インラインスタイルシートの使用の増加: - デスクトップ:2022年の25%から2024年には31%に。 - モバイル:2022年の25%から2024年には32%に。 diff --git a/src/server/helpers.py b/src/server/helpers.py index d0ba416b884..391b66f1d5c 100644 --- a/src/server/helpers.py +++ b/src/server/helpers.py @@ -277,6 +277,9 @@ def get_ebook_methodology(lang, year): ) # Remove lazy-loading attributes methodology_maincontent = re.sub(' loading="lazy"', "", methodology_maincontent) + # Remove table wrappers + methodology_maincontent = re.sub('
', "
", methodology_maincontent) + methodology_maincontent = re.sub('
', "
", methodology_maincontent) return methodology_maincontent diff --git a/src/static/css/ebook.css b/src/static/css/ebook.css index 6ecef4750dd..8306c95b27a 100644 --- a/src/static/css/ebook.css +++ b/src/static/css/ebook.css @@ -69,10 +69,21 @@ margin: 0; } +table { + border-radius: 16px; + border-radius: 1rem; + box-shadow: 0 0 16px 0 rgb(78, 85, 100, 0.2); + box-shadow: 0 0 1rem 0 rgb(78, 85, 100, 0.2); +} + .table-wrap { padding: 0; } +table caption { + caption-side: bottom; +} + .large-table td { padding: 0.2rem; line-height: 1.5em; @@ -360,9 +371,9 @@ section.chapter { /** We have some big tables that can't be force to break * So we cheat and make them small enough to fit on a page */ - figure table td, - figure table td li, - figure table td p { + div table td, + div table td li, + div table td p { font-size: 12px; font-size: 0.85rem; } @@ -412,6 +423,8 @@ section.chapter { figure a, figure div, figure img, + div.table, + p.table-caption, figcaption { max-width: 100%; text-align: center; @@ -426,7 +439,8 @@ section.chapter { text-decoration: none; } - figcaption { + figcaption, + p.table-caption { width: 1000px; } diff --git a/src/static/css/page.css b/src/static/css/page.css index 471fe0341d2..e5aa6c3f2a0 100644 --- a/src/static/css/page.css +++ b/src/static/css/page.css @@ -505,7 +505,8 @@ figure .anchor-link { background-color: #e5e5e5; } -figure { +figure, +div.table { position: relative; display: flex; flex-direction: column; @@ -551,7 +552,8 @@ figure .code-block { margin: 0.625rem auto; } -figcaption { +figcaption, +p.table-caption { margin: 8px auto 0; margin: 0.5rem auto 0; text-align: center; diff --git a/src/static/images/2024/security/security-headeers-by-rank.png b/src/static/images/2024/security/security-headers-by-rank.png similarity index 100% rename from src/static/images/2024/security/security-headeers-by-rank.png rename to src/static/images/2024/security/security-headers-by-rank.png diff --git a/src/tools/generate/generate_ebook_pdfs.js b/src/tools/generate/generate_ebook_pdfs.js index a8a4a12a0f2..590fa0c6936 100644 --- a/src/tools/generate/generate_ebook_pdfs.js +++ b/src/tools/generate/generate_ebook_pdfs.js @@ -27,7 +27,7 @@ const generate_ebook_pdfs = async () => { // Generate Ebook PDF console.log('Generating ebook for',year,language); - const command = `prince "http://127.0.0.1:8080/${language}/${year}/ebook?print" -o static/pdfs/web_almanac_${year}_${language}.pdf --pdf-profile="PDF/UA-1"`; + const command = `prince "http://127.0.0.1:8080/${language}/${year}/ebook?print" -o static/pdfs/web_almanac_${year}_${language}.pdf --pdf-profile="PDF/UA-1" --fail-safe`; exec (command, (err, stdout, stderr) => { if (err) { // some err occurred diff --git a/src/tools/generate/generate_ebooks.js b/src/tools/generate/generate_ebooks.js index 6523a753bbd..d2fb4157091 100644 --- a/src/tools/generate/generate_ebooks.js +++ b/src/tools/generate/generate_ebooks.js @@ -14,6 +14,9 @@ const update_links = (chapter, chapter_config) => { body = body.replace(/figure_link\(/g,'figure_link(ebook=true,'); // Remove figure_drodowns as not needed body = body.replace(/{{\s*figure_dropdown.*?}}/gsm,''); + // For PDFs tables cannot be in figures + body = body.replace(/
]*?)>/gs,'
デスクトップ モバイル デスクトップ
'); + body = body.replace(/<\/table>[\n ]*<\/div>[\n ]*<\/div>[\n ]*
(.*?)<\/figcaption>([\n ]*)<\/figure>/gs,'

$1

'); // Replace current chapter header ids to full id (e.g.

->

) body = body.replace(/ #javascript-fig-1)