HTML 및 CSS를 사용하여 시각적으로 간격을 둔 전화 및 IBAN 번호

사람이 읽을 수 있고 기계가 읽을 수 있어야 하는 숫자를 표시하는 방법은 무엇입니까? 국제 은행 계좌 번호( IBAN )는 DE89430609673029840000와 같이 육안으로 읽기 어려운 매우 긴 숫자 코드입니다. 표준에서는 4자리 블록을 작성할 것을 권장하므로 숫자는 DE89 4306 0967 3029 8400 00가 됩니다.

사람이 읽을 수 있음 + 기계가 읽을 수 있음

그러나 이 사람이 읽을 수 있는 4개의 블록 표기법은 HTML 양식 필드 유효성 검사 또는 종종 공백을 허용하지 않는 유사한 JavaScript 평가를 사용하는 입력 필드에 서식이 지정된 은행 코드를 복사하여 붙여넣을 때 문제를 일으킵니다. , 그러나 여전히 일반적인 관행).



전화번호를 쓰는 것도 비슷한 문제를 야기합니다. 우리는 tel: url로 연결된 정확한 국제 기계 판독 가능 전화번호를 제공하고 싶지만 동시에 인간 고객이 읽고 기억하기 쉽습니다!

CSS 인접 형제 선택자

물론 CSS를 사용하는 솔루션이 있지만 시각적으로 구분된 각 블록에 <span> 를 사용하여 HTML 마크업도 변경해야 합니다.

<span class="visually-spaced">DE89</span><span class="visually-spaced">4306</span><span class="visually-spaced">0967</span><span class="visually-spaced">3029</span><span class="visually-spaced">8400</span><span class="visually-spaced">00</span>

이제 ::before 의사 요소를 사용하여 요소 사이에 시각적 공간을 추가할 수 있습니다. adjacent sibling selector (plus sign "+")을 사용하면 첫 번째 블록 앞에 공백이 없습니다.

visually-spaced+.visually-spaced:before {
    content: " ";
    letter-spacing: .25rem;
}

이제 별개의 블록처럼 보이지만 내용에 공백 문자가 포함되어 있지 않기 때문에 시각적으로 구분된 블록의 줄을 복사하여 붙여넣으면 중간에 구분 문자가 없는 하나의 블록이 됩니다.

연속 밑줄

지금까지 의사 요소 없이 margin 또는 padding를 사용하거나 의사 요소에 너비를 설정하여 동일한 효과를 얻을 수 있었지만 형식이 지정된 콘텐츠를 연결하고 링크에 밑줄을 긋고 싶을 때 밑줄이 끊어집니다. 블록 사이.



위의 예는 this codepen 에서 볼 수 있습니다.

개발자 경험(DX) 유지

그래서 우리는 사용자 경험(UX)을 개선하기 위해 약간의 CSS와 HTML 마크업을 사용했지만 개발자 경험(DX)은 어떻습니까? 이제 소스 코드의 가독성이 낮아져 코드를 편집하고 유지 관리하기가 더 어려워졌습니다.

before:
DE89 4306 0967 3029 8400 00

after:
<span class="visually-spaced">DE89</span><span class="visually-spaced">4306</span><span class="visually-spaced">0967</span><span class="visually-spaced">3029</span><span class="visually-spaced">8400</span><span class="visually-spaced">00</span>

그러나 2022년에는 소스 코드를 수동으로 편집하는 경우가 거의 없습니다. 대부분의 콘텐츠는 일부 콘텐츠 관리 시스템(CMS) 또는 사이트 빌더(예: 11ty 또는 다른 Jamstack 도구)에 의해 생성됩니다.
liquid 코드를 사용하여 내 콘텐츠의 여러 언어 버전을 생성하면 내 전후 상황은 실제로 다음과 같습니다.

이전: 현지화된 콘텐츠 문자열을 인쇄합니다.

JSON:
  "bankaccountNumber": "DE89 4306 0967 3029 8400 00"

Liquid:
{{ content.bankaccountNumber }}

이후: 문자열 배열을 반복합니다.

JSON:
  "bankaccountNumberChunks": [
    "DE89",
    "4306",
    "0967",
    "3029",
    "8400",
    "00"
  ],

Liquid:
{%- for chunk in content.bankaccountNumberChunks -%}<span class="visually-spaced">{{ chunk }}</span>{%- endfor -%}            

이 서식 지정 기술의 실제 예는 내 웹 사이트에서 찾을 수 있습니다. www.ingo-steinke.com/#contact