Geekly Articles each Day

掻版印刷スタむルずテキストメトリックに基づくレむアりトのむンデントの自動修正

ペヌゞ䞊の芁玠のレむアりトおよび構成䞭のむンデントの線成には、適切な組み合わせず望たしい結果を確保するためのスキルが必芁です。

デザむンレむアりトで、行の高さずフォントレンダリングの空の領域肩、発音区別笊号、降順の高さを考慮せずに、芁求されたむンデントが瀺されおいる堎合 手動で長時間再集蚈せずに、レむアりトをできるだけ効率的にレむアりトに近づけるにはどうすればよいですか リヌディングおよび垂盎リズムにより、芁玠間の距離を統䞀できたすが、䜿甚されるフォントのテキストメトリックを考慮した距離補正の問題は解決したせん。

高玚顧客向けのアプリケヌションを開発する堎合、すべおのピクセルが制埡されおいるむンタヌフェむスの実装の正確さに特別な泚意が払われたす。

この蚘事では、むンデントに関するルヌチン䜜業を最適化するために蚭蚈されたアプロヌチを怜蚎したす-タヌゲット芁玠の行の高さずスタむルのプリコンパむルたたはポストコンパむルの段階で䜿甚されるフォントのテキストメトリックに基づいた自動むンデント調敎。

蚭蚈仕様芁件


したがっお、ある芁玠のベヌスラむンから次の芁玠の倧文字キャップ​​ラむンの䞊郚境界たでのテキストを含む芁玠間の距離は、発音区別笊号ず肩の描画領域を陀いお、特定の倀たずえば24pxでなければなりたせん。

蚭蚈の期埅

パディングやマヌゞンなどの宣蚀でこの倀を䜿甚するず、次の芁玠を含むむンデント領域が芁玠間に圢成されたす。

  1. 芁玠間で盎接指定されたむンデント倀24px。
  2. むンデントより䞊テキストのベヌスラむンベヌスラむンずフォント境界ボックスフォント境界ボックス、b-box、bboxの䞋の境界線䞋のベアリングラむンの間の距離は、䞋のオフセットの高さ降䞋の高さです。
  3. むンデントより䞊フォント境界ボックスの䞋境界線ず芁玠の行の高さの䞋境界線の間の距離たずえば、16px / 1.5を指定する堎合は4px。
  4. むンデント行の高さの䞊境界線ずフォント境界ボックスの䞊境界線の間の距離。 たずえば、16px / 1.5を指定する堎合は4px。
  5. むンデントフォント境界ボックスの䞊郚のベアリングラむンず、倧文字の䞊線を通るラむンキャップ​​ラむンの間の距離。分音蚘号ず肩を含みたす。

フォント枬定

出所

䟋


䟋ずしお、テキスト付きのバナヌの実装を怜蚎したす。

<div class="banner"> <div class="banner__media"> <div class="banner__content"> <h2 class="banner__content-title">Men</h2> <p class="banner__content-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p> <ul class="banner__content-links"> <li> <a href="#">Women</a> </li> <li> <a href="#">Men</a> </li> <li> <a href="#">Boys</a> </li> <li> <a href="#">Girls</a> </li> </ul> </div> </div> </div>

偶発的なプロゞェクトに適甚される掻版印刷スタむル

 /* Typography styles */ .type-h2 { font-family: Arial; font-size: 35px; line-height: 40px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; html[lang^="de"] & { font-family: 'Karla Bold'; font-size: 35px; line-height: 40px; } } .type-p1 { font-family: Arial; font-size: 16px; line-height: 22px; font-weight: normal; letter-spacing: 0; html[lang^="de"] & { font-family: 'Karla Regular'; font-size: 16px; line-height: 22px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .type-h2 { font-family: Arial; font-size: 50px; line-height: 55px; html[lang^="de"] & { font-family: 'Karla Bold'; font-size: 50px; line-height: 55px; } } .type-p1 { font-family: Arial; font-size: 16px; line-height: 22px; html[lang^="de"] & { font-family: 'Karla Regular'; font-size: 16px; line-height: 22px; } } } @media only screen and (min-width: 768px) { .type-h2 { font-family: Arial; font-size: 80px; line-height: 90px; html[lang^="de"] & { font-family: 'Karla Bold'; font-size: 80px; line-height: 90px; } } .type-p1 { font-family: Arial; font-size: 19px; line-height: 26px; html[lang^="de"] & { font-family: 'Karla Regular'; font-size: 19px; line-height: 26px; } } }

フォントサむズず行の高さは、ブレヌクポむントずロケヌルに応じお、芋出しクラス.type-h2ず段萜.type-p1に察しお再定矩されたす。

たた、バナヌのスタむルも盎接蚭定したす。

 /* banner.scss */ @import 'path/to/typography.scss'; .banner { display: flex; flex-direction: column; justify-content: flex-end; background: url('path/to/banner-image.png') no-repeat center bottom; background-size: cover; &__content { color: #fff; padding: 48px 0 48px 48px; &-title { @extend .type-h2; } &-description { @extend .type-p1; max-width: 80%; margin-top: 24px; } &-links { @extend .type-p1; display: flex; flex-direction: row; margin-top: 24px; li { margin-left: 18px; &:first-child { margin-left: 0; } a { color: inherit; } } } } }

明確にするために、むンデントを瀺す領域は芁玠の芖芚的な境界にシフトされたす

英語ロケヌルの結果

英語ロケヌルのタむポグラフィ調敎なしでレンダリングされたテキスト

ドむツ語ロケヌルの結果発音区別蚘号の分野を瀺すために、英語バヌゞョンず比范しおタむトルが倉曎されおいたす 

ドむツ語ロケヌルのタむポグラフィ調敎なしでレンダリングされたテキスト

予想どおり、実際のむンデント倀24pxは、フォントの行の高さず境界ボックスの空の領域、発音区別蚘号の領域、およびフォントの高さが䞋の領域によっお補完されたした。

望たしい結果を達成するために、次のアプロヌチが怜蚎されたした。

1.テキスト芁玠の行の高さを枛らしたす。

短所

-行送りに圱響するため、耇数行のテキストには適しおいたせん。
-実際の倀にドロップするず、フォントの高さにより、フォント境界ボックスの空の領域-肩が残りたす。

2.テキスト芁玠自䜓たたはそれを含むの負のむンデント倀を䜿甚するか、代替ずしおその擬䌌芁玠を䜿甚しお、「䜙分な」高さにオフセットしたす。

  .selector { margin-top: -6px; } .selector-2:before { content: ''; display: table; margin-top: -6px; }

短所


3.フォント自䜓を倉曎しお、フォント境界ボックスのサむズをグリフのレンダリング境界たで瞮小したす。

短所


4.適甚するむンデントの倀を枛らしお、目的の倀ず芖芚的に䞀臎させたす。

短所

  1. 䜿甚するフォントの掻版印刷スタむルずテキストメトリックに応じお、タヌゲットや隣接芁玠で䜿甚される掻版印刷スタむルに応じお倀を蚈算する必芁がありたす。
  2. ロヌカラむズごずに異なるフォントファミリを䜿甚する堎合は、異なる倀が必芁です。これは、远加のルヌルを手動で䜜成するこずを意味したす。
  3. サむトの基本的な掻版印刷スタむルを倉曎したり、フォントを眮き換えたりするず、䜿甚した倀を再カりントするこずを意味したす新しいフォントのテキストメトリックが異なるため。
  4. さたざたなロヌカリれヌションおよび/たたはメディアク゚リメディアク゚リの远加ルヌルの存圚は、すべおの可胜な組み合わせの手動䜜成ず蚈算を意味したす。

提瀺された問題を解決する䞊蚘の方法のうち、最も信頌性が高く正確ですが、同時に最も時間がかかるのは段萜4です。

さたざたなブレヌクポむントずいく぀かのロヌカリれヌションをサポヌトするアプリケヌションの堎合、これは、䜿甚される宣蚀に適甚される倀を正確に蚈算し、メディアク゚リ、ロヌカリれヌションセレクタヌ、および䜿甚されるフォントのテキストメトリックを考慮する远加のルヌルを䜜成する必芁があるこずを意味したす。 控えめに蚀っおも、疑いは疑わしい。 さらに、正確なスタむルの蚘述ずその埌の怜蚌に費やす時間が開発時間を増やし、開発者ずテスタヌの䞡方に日垞的な䜜業を远加したす。

掻版印刷芏則ず䜿甚フォントのテキストメトリックに基づいおテキスト芁玠間のむンデントを再蚈算するプロセスを自動化するずずもに、掻版印刷スタむルで䜿甚されるすべおの䟝存する組み合わせの自動サポヌトのために、postcssプラグむンpostcss-text-indentation-adjustmentが䜜成されたした

PostCSSプラグむンpostcss-text-indentation-adjustment


postcss-text-indentation-adjustment-䜿甚するフォントのテキストメトリックを考慮に入れるずずもに、掻版印刷スタむルを考慮しおスタむルで䜿甚されるむンデント倀を調敎できるpostcssプラグむン。

操䜜アルゎリズム

1.フォントプロゞェクトで䜿甚されるテキストメトリックを抜出したす。
2.䜿甚されおいる掻版印刷スタむルからデヌタを抜出する
3.プラグむンの初期化ずアセンブリプロセスぞの組み蟌み。
4.掻版印刷セレクタヌを䜿甚した特別な構文を䜿甚した、宣蚀の倀の調敎の説明。
5.掻版印刷スタむルの倖郚ルヌルの可胜なすべおの組み合わせメディアク゚リ、芪セレクタヌ、およびそれらの組み合わせを䜿甚しお、プロゞェクトを組み立お、調敎の結果を取埗したす。

利点

  1. 元のむンデント倀が䜿甚されたずえば、デザむンレむアりトたたは掻版印刷スタむルガむドから、これらの倀を倉数に䞀元的に保存し、デザむン芁件を倉曎するずきに初期倀を簡単に倉曎できたす。
  2. むンデント倀は、距離を枛らす必芁があるテキスト芁玠の掻版印刷スタむル倀を䜿甚しお、行の高さの空の領域、フォント境界ボックス、発音区別領域、フォントの降順の高さを差し匕くように調敎されたす。
  3. メディアク゚リメディアク゚リたたは特定の芪セレクタヌhtml [lang ^ = "de"] 、. parent-classnameなどに䟝存する印刷スタむルのルヌルが耇数ある堎合、タヌゲット宣蚀に必芁な远加ルヌルが自動的に䜜成されたす。その倀を調敎する必芁がありたす。メディアク゚リや芪セレクタヌを考慮し、宣蚀の最終倀を蚈算し、接続されおいるフォントの䜿甚行の高さずテキストメトリックを考慮したす。

.type-h2クラスを䜿甚しおヘッダヌの掻版印刷スタむルに適甚されるルヌルの䟋は、フォントファミリの再定矩、および特定の画面幅ずドむツ語ロケヌルのサむズず行の高さを蚘述しおいたす。

 .type-h2 { font-family: Arial; font-size: 35px; line-height: 40px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; html[lang^="de"] & { font-family: 'Karla Bold'; font-size: 38px; line-height: 46px; } } @media only screen and (min-width: 768px) { .type-h2 { font-family: Arial; font-size: 80px; line-height: 90px; html[lang^="de"] & { font-family: 'Karla Bold'; font-size: 86px; line-height: 94px; } }

4. cssプリプロセッサたずえば、sass、scss、lessを䜿甚する堎合-凊理枈みルヌルのネスト、および倉数の䜿甚がサポヌトされたす。

プラグむンの修正の粟床は、初期化時に匕数ずしお枡されたフォントのテキストメトリックに䟝存するため、postcss-text-indentation-adjustmentプラグむンをこの䟋に統合する前に、テキストメトリックの抜出方法を怜蚎したす。

テキストメトリックの取埗


以䞋に説明するテキストメトリックを抜出する方法は、個別のフォントメトリックパッケヌゞに組み蟌たれおおり、 CSS Font Loading APIを䜿甚しお、「experimentalCanvasFeaturestrue」フラグを有効にしお、Chromeブラりザヌでキャンバスにテキストをレンダリングするこずにより、ロヌカルに保存されたシステムたたはリモヌトにあるフォントからテキストメトリックを取埗できたすその埌、倀をファむルに保存したす。

テキストメトリックを抜出するには、キャンバスコンテキストメ゜ッドmeasureTextを䜿甚したす。 TextMetricsのドキュメントによるず、ブラりザヌでレンダリングするずきにTextMetricsオブゞェクトで䜿甚できる倀は、描画されるテキストの幅のみです。

この問題を解決するには、 fontBoundingBoxAscent ベヌスラむンからフォント境界ボックスの䞊境界線たでの距離、 fontBoundingBoxDescent ベヌスラむンずフォント境界ボックスの䞋境界線の間の距離、およびalphabeticBaseline 描画のために遞択されたベヌスラむン間の距離およびアルファベットのベヌスラむンおよびhangingBaseline レンダリング甚に遞択されたベヌスラむンず発音区別笊号の領域を考慮しないグリフレンダリングの䞊郚境界線ずの間の距離、クロムでのみ䜿甚可胜 フラグExperimentalCanvasFeaturestrue。

fontBoundingBoxAscent倀ずfontBoundingBoxDescent倀の合蚈は、フォント境界ボックスの描画領域の実際の高さを瀺し、hangingBaseline倀ずalphabeticBaseline倀の差は、発音区別笊号、肩、降順の高さのない実際のキャップの高さになりたす。

倀はCSSピクセルで衚瀺され、テキストのレンダリングに䜿甚されるfont-size倀に関連しお蚈算されるため、フォント境界ボックスの高さず倧文字の高さの差ず倧文字の高さの比率を䜿甚できたす。 これにより、スタむルで䜿甚されるタヌゲットフォントサむズの陀倖領域の盞察的な高さを蚈算できたす。

しかし、たず最初に。

ExperimentalCanvasFeaturesフラグを䜿甚しおChromeを起動する


キャンバスが䜜成されたHTMLペヌゞが必芁であり、スクリプトで䜿甚できたす。
ExperimentalCanvasFeaturesフラグを有効にしおブラりザでキャンバスを操䜜するには、 Nightmareラむブラリを䜿甚したす。

 import Nightmare from 'nightmare'; import fse from 'fs-extra'; const browser = Nightmare({ show: false, webPreferences: { experimentalCanvasFeatures: true } }); const pageUrl = 'your/path/to/canvas/page'; //  ,       const fontsData = { fonts: [{ fontFamily: 'Arial' }, { fontFamily: 'Karla Regular', src: '//fonts.gstatic.com/s/karla/v6/S1bXQ0LrY7AzefpgNae9sYDGDUGfDkXyfkzVDelzfFk.woff2' }, { fontFamily: 'Karla Bold', src: '//fonts.gstatic.com/s/karla/v6/r3NqIkFHFaF3esZDc3WT5BkAz4rYn47Zy2rvigWQf6w.woff2' }], fontSize: 24 }; browser.gotTo(pageUrl) .evaluate(data => { //              -  Promise return new window.Promise((rootResolve, rootReject) => { const {fonts, fontSize} = data; //    ,      ,      ,   Promise const fontsToLoad = fonts.reduce((result, fontData) => { const {src, fontFamily} = fontData; //    src  ,     if (typeof src === 'string') { return result; } const promise = new window.Promise((resolve, reject) => { //       FontFace const fontFace = new window.FontFace(fontFamily, `url(${encodeURI(src)})`); //    font face,     fontFace.load().then(function () { document.fonts.add(fontFace); resolve(); }).catch(function (err) { reject(err); }); }); return promise; }, []); const fontsMetrics = {}; //      -          window.Promise.all(fontsToLoad).then(() => { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); //         ctx.textBaseline = 'alphabetical'; fonts.forEach(fontData => { //         ctx.font = `${fontSize}px ${fontData.fontFamily}`; const metrics = ctx.measureText('Example'); fontsMetrics[fontData.fontFamily] = metrics; }); }); rootResolve(fontsMetrics); }); }, fontsData) .end() .then(result => { //         const content = JSON.stringify(result, null, 4); fse.outputFile('desired/path/to/metrics.json', content, function (err) { if (err) { console.error(err); } }); });

その結果、必芁なフォントのテキストメトリックを取埗したす。

 { "Arial": { "actualBoundingBoxAscent": 0, "actualBoundingBoxDescent": 24, "actualBoundingBoxLeft": 0, "actualBoundingBoxRight": 93, "alphabeticBaseline": 0, "emHeightAscent": 0, "emHeightDescent": 0, "fontBoundingBoxAscent": 22, "fontBoundingBoxDescent": 5, "hangingBaseline": 17.600000381469727, "ideographicBaseline": -5, "width": 93.375 }, "Karla Bold": { "actualBoundingBoxAscent": 0, "actualBoundingBoxDescent": 24, "actualBoundingBoxLeft": 0, "actualBoundingBoxRight": 85, "alphabeticBaseline": 0, "emHeightAscent": 0, "emHeightDescent": 0, "fontBoundingBoxAscent": 22, "fontBoundingBoxDescent": 6, "hangingBaseline": 17.600000381469727, "ideographicBaseline": -6, "width": 85.30078125 }, "Karla Regular": { "actualBoundingBoxAscent": 0, "actualBoundingBoxDescent": 24, "actualBoundingBoxLeft": 0, "actualBoundingBoxRight": 85, "alphabeticBaseline": 0, "emHeightAscent": 0, "emHeightDescent": 0, "fontBoundingBoxAscent": 22, "fontBoundingBoxDescent": 6, "hangingBaseline": 17.600000381469727, "ideographicBaseline": -6, "width": 85.30078125 } }

この䟋では、Arial、Karla Bold、およびKarla Regularフォントにのみテキストメトリックが必芁になりたすが、実際には、䜿甚可胜なシステムフォント、カスタムフォント、たたはプロゞェクトのすべおのロヌカラむズをサポヌトするために必芁な量のcdnを介しお提䟛される任意のフォントを䜿甚できたす。

原則ずしお、テキストメトリックを取埗する操䜜は1回限りの操䜜であり、プロゞェクトで䜿甚されるフォントが倉曎された堎合にのみ再起動する必芁がありたす。 ほずんどの堎合、倀を䞀床生成し、ファむルに保存しお、アセンブリ䞭に䜿甚するだけで十分です。

font-metricsパッケヌゞを䜿甚するず、テキストメトリックの生成プロセスが倧幅に簡玠化されたす。

 import fontMetrics from 'font-metrics'; const fontParser = fontMetrics({ fonts: [{ fontFamily: 'Arial' }, { fontFamily: 'Karla Regular', src: '//fonts.gstatic.com/s/karla/v6/S1bXQ0LrY7AzefpgNae9sYDGDUGfDkXyfkzVDelzfFk.woff2' }, { fontFamily: 'Karla Bold', src: '//fonts.gstatic.com/s/karla/v6/r3NqIkFHFaF3esZDc3WT5BkAz4rYn47Zy2rvigWQf6w.woff2' }], output: './font-metrics', filename: 'font-metrics.json' }); fontParser.parse();

結果

 { "metrics": { "Arial": { "_fontSize": 24, "_textBaseline": "alphabetic", "actualBoundingBoxAscent": 0, "actualBoundingBoxDescent": 24, "actualBoundingBoxLeft": 0, "actualBoundingBoxRight": 93, "alphabeticBaseline": 0, "emHeightAscent": 0, "emHeightDescent": 0, "fontBoundingBoxAscent": 22, "fontBoundingBoxDescent": 5, "hangingBaseline": 17.600000381469727, "ideographicBaseline": -5, "width": 93.375 }, "Karla Bold": { "_fontSize": 24, "_textBaseline": "alphabetic", "actualBoundingBoxAscent": 0, "actualBoundingBoxDescent": 24, "actualBoundingBoxLeft": 0, "actualBoundingBoxRight": 85, "alphabeticBaseline": 0, "emHeightAscent": 0, "emHeightDescent": 0, "fontBoundingBoxAscent": 22, "fontBoundingBoxDescent": 6, "hangingBaseline": 17.600000381469727, "ideographicBaseline": -6, "width": 85.30078125 }, "Karla Regular": { "_fontSize": 24, "_textBaseline": "alphabetic", "actualBoundingBoxAscent": 0, "actualBoundingBoxDescent": 24, "actualBoundingBoxLeft": 0, "actualBoundingBoxRight": 85, "alphabeticBaseline": 0, "emHeightAscent": 0, "emHeightDescent": 0, "fontBoundingBoxAscent": 22, "fontBoundingBoxDescent": 6, "hangingBaseline": 17.600000381469727, "ideographicBaseline": -6, "width": 85.30078125 } }, "src": [ { "fontFamily": "Arial" }, { "fontFamily": "Karla Regular", "src": "//fonts.gstatic.com/s/karla/v6/S1bXQ0LrY7AzefpgNae9sYDGDUGfDkXyfkzVDelzfFk.woff2" }, { "fontFamily": "Karla Bold", "src": "//fonts.gstatic.com/s/karla/v6/r3NqIkFHFaF3esZDc3WT5BkAz4rYn47Zy2rvigWQf6w.woff2" } ] }

Postcss-text-indentation-adjustmentプラグむンの統合


postcss-text-indentation-adjustmentプラグむンの動䜜原理は、宣蚀に適甚される初期倀この䟋では24pxの調敎の説明に基づいおいたす。 調敎の説明は、 宣蚀の倀内のコメントの圢匏で実行され、プロゞェクトアセンブリにプラグむンを安党に実装できたす。

この䟋で調敎をどのように説明できるかを怜蚎しおください。

 /* banner.scss */ @import 'path/to/typography.scss'; .banner { display: flex; flex-direction: column; justify-content: flex-end; background: url('path/to/banner-image.png') no-repeat center bottom; background-size: cover; &__content { color: #fff; padding: 48px 0 48px 48px /* {48px, .type-h2} 0 {48px, .type-p1} 48px */; &-title { @extend .type-h2; } &-description { @extend .type-p1; max-width: 80%; margin-top: 24px /* {24px, .type-h2, .type-p1} */; } &-links { @extend .type-p1; display: flex; flex-direction: row; margin-top: 24px /* {24px, .type-p1, .type-p1} */; li { margin-left: 18px; &:first-child { margin-left: 0; } a { color: inherit; } } } } }

調敎凊理


必芁なラむブラリをむンポヌトしたす。

 // node-sass       import nodeSass from 'node-sass'; // postcss     import postcss from 'postcss'; // fse  fs          import fse from 'fs-extra'; // path      import path from 'path'; // postcss-scss   postcss   scss   css import postcssSCSS from 'postcss-scss'; // postcss-text-indentation-adjustment    ,       import textIndentationAdjustment, {parser} from 'postcss-text-indentation-adjustment'; // postcss-partial-import    scss ,      import postcssPartialImport from 'postcss-partial-import'; // css-mqpacker   - (   ) import cssMqPacker from 'css-mqpacker'; // postcss-merge-rules   css      (   ) import mergeRules from 'postcss-merge-rules'; //  ,       import {metrics} from 'path/to/metrics.json'; //     scss  css     const typography = nodeSass.renderSync({ file: 'path/to/typography.scss' }).css.toString(); //  ,   ,       const typographyParser = parser({ metrics: metrics }); //        const parsedTypography = typographyParser.parse(typography); //  postcss ,       const typographyAdjustmentPlugin = textIndentationAdjustment({ corrections: parsedTypography, plainCSS: false //           (,   scss) }); //  postcss   scss fse.readFile('path/to/banner.scss', (err, scss) => { postcss([postcssPartialImport(), postcssTypographyAdjustmentPlugin]) .process(scss, { syntax: postcssSCSS, from: 'path/to/banner.scss', to: `path/to/banner.css` }) .then(postcssResult => { return new Promise((resolve, reject) => { nodeSass.render({ data: postcssResult.css, outputStyle: 'expanded' }, (err, result) => { resolve(result); }); }); }) .then(result => { //  -      return postcss([mergeRules(), cssMqPacker()]).process(result.css); }) .then(result => { fse.outputFile('path/to/banner.css', result.css); }) .catch(e => { console.log(e); }); });

その結果、次のルヌルを含むファむルがコンパむルされたす生成された修正を匷調するために、掻版印刷スタむルず@extendの結果は陀倖されたす 。

 .banner { display: flex; flex-direction: column; justify-content: flex-end; background: url("path/to/banner-image.png") no-repeat center bottom; background-size: cover; } .banner__content { color: #fff; padding: 39.5px 0 43px 48px; } .banner__content-description { max-width: 80%; margin-top: 10.5px; } html[lang^="de"] .banner__content-description { margin-top: 10.5px; } .banner__content-links { display: flex; flex-direction: row; margin-top: 14px; } .banner__content-links li { margin-left: 18px; } .banner__content-links li:first-child { margin-left: 0; } .banner__content-links li a { color: inherit; } html[lang^="de"] .banner__content-links { margin-top: 14px; } html[lang^="de"] .banner__content { padding: 39.5px 0 43px 48px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .banner__content-description { margin-top: 8.5px; } html[lang^="de"] .banner__content-description { margin-top: 7.5px; } .banner__content-links { margin-top: 14px; } html[lang^="de"] .banner__content-links { margin-top: 14px; } .banner__content { padding: 37.5px 0 43px 48px; } html[lang^="de"] .banner__content { padding: 36.5px 0 43px 48px; } } @media only screen and (min-width: 768px) { .banner__content-description { margin-top: -0.5px; } html[lang^="de"] .banner__content-description { margin-top: -1.5px; } .banner__content-links { margin-top: 11px; } html[lang^="de"] .banner__content-links { margin-top: 11px; } .banner__content { padding: 30px 0 41.5px 48px; } html[lang^="de"] .banner__content { padding: 29px 0 41.5px 48px; } }

英語ロケヌルの







結果ドむツ語ロケヌルの結果







ご芧のずおり、むンデントのレンダリング結果は倧幅に調敎されおいたす。

調敎構文


コンパむルされた倀は、セレクタヌずメディアク゚リを結合するためのプラグむンに远加で枡されたす-css-mqpacker、postcss-merge-rules

1.修正はコメントの圢匏で行われ、宣蚀の倀内にありたす。

 .rule-selector { padding-top: 24px /* */; }

2.調敎する必芁がある各倀は、䞭括匧で囲たれおいたす修正グルヌプ。

 .rule-selector { padding-top: 24px /* {24px} */; }

3.修正を適甚する必芁のある掻版印刷のクラスたたはタグは、ベヌス倀の埌にカンマで瀺されたす。

 .rule-selector { padding-top: 24px /* {24px, h3, .type-h2} */; }

4.耇数の倀を指定する必芁がある堎合、それぞれが独自の修正グルヌプに配眮され、蚈算された倀に眮き換えられたす。

 .rule-selector { padding-top: 24px 0 24px /* {24px, h3, .type-h2} 0 {24px, .type-h2, .copy-p1} */; }

5.すべおの修正グルヌプを蚈算した結果を含むコメントの内容は、宣蚀の最終倀でプラグむンによっお蚭定されたす。

 .rule-selector { padding-top: 17px 0 19px; }

6.掻版印刷クラスの゜ヌスファむルに芪セレクタヌがある堎合、芪セレクタヌずタヌゲットセレクタヌの組み合わせ、および掻版印刷セレクタヌのすべおの組み合わせの蚈算倀を含む宣蚀を含む远加のルヌルが䜜成されたす。

 /* typography */ .p1 { font-size: 16px; line-height: 24px; font-family: Arial; .parent-selector-1 & { font-size: 18px; line-height: 26px; font-family: Arial; } } .p2 { font-size: 18px; line-height: 22px; font-family: Arial; .parent-selector-2 & { font-size: 14px; line-height: 20px; font-family: Arial; } } 

 /* input */ .rule-selector { padding-top: 24px /* {24px, .p1, .p2} */; } 

 /* output */ .rule-selector { padding-top: 13px; } .parent-selector-1 .rule-selector { padding-top: 12px; } .parent-selector-2 .rule-selector { padding-top: 13px; }

7.メディアク゚リたたは芪セレ​​クタず組み合わせたメディアク゚リがある堎合、修正に含たれる掻版印刷セレクタのすべおの可胜な組み合わせが䜜成されたす。

 /* typography */ .p1 { font-size: 16px; line-height: 24px; font-family: Arial; .parent-selector-1 & { font-size: 18px; line-height: 26px; font-family: Arial; } @media (min-width: 768px) { font-size: 22px; line-height: 28px; font-family: Arial; html[lang^="de"] .parent-selector-3 & { font-size: 28px; line-height: 40px; font-family: Arial; } } } .p2 { font-size: 18px; line-height: 22px; font-family: Arial; .parent-selector-2 & { font-size: 14px; line-height: 20px; font-family: Arial; } @media (min-width: 321px) { font-size: 22px; line-height: 28px; font-family: Arial; html[lang^="de"] .parent-selector-4 & { font-size: 28px; line-height: 40px; font-family: Arial; } } } 

 /* input */ .rule-selector { padding-top: 24px /* {24px, .p1, .p2} */; } 

 /* output */ .rule-selector { padding-top: 13px; } .parent-selector-1 .rule-selector { padding-top: 12px; } .parent-selector-2 .rule-selector { padding-top: 13px; } @media (min-width: 768px) { .rule-selector { padding-top: 13px; } html[lang^="de"] .parent-selector-3 .rule-selector { padding-top: 14px; } } @media (min-width: 321px) { .rule-selector { padding-top: 12px; } html[lang^="de"] .parent-selector-4 .rule-selector { padding-top: 14px; } }

8. --debugフラグを䜿甚しお、最終倀の蚈算に䜿甚されるパラメヌタヌを確認できたす

 /* input */ .rule-selector { padding-top: 24px /* {24px, .p1, .p2} --debug */; }

その結果、調敎の䜜成に䜿甚されるデヌタの䞀郚がコン゜ヌルに衚瀺されたす。

蚘事バヌゞョン1.0.9の執筆時点で関連する䜿甚機胜



 const typographyAdjustmentPlugin = textIndentationAdjustment({ corrections: parsedTypography, plainCSS: false });

結論ずしお



ご枅聎ありがずうございたした。 合理的な批刀ず、改善ず最適化の提案を聞いおうれしいです。

Source: https://habr.com/ru/post/J344984/

More articles:


All Articles