여러 개의 공백이 아닌 탭 공간 (“nbsp”)?


959

 네 번 입력하지 않고 HTML에 탭 문자를 삽입 할 수 있습니까?


21
줄 시작 부분에서 탭 다중 시간을 사용할 때 <CRE>를 사용하는 것이 도움이된다는 것을 알게되었습니다 (C 코드를 qouting 할 때)
Guy Kovel

TAB캐릭터는 ... 무엇을 할까?
Michel de Ruiter

자신의 태그를 정의한 <tab>다음 jQuery on ready함수를 사용 하여 원하는 수의 동등한 공백으로 바꾸거나 채울 수 있습니다.
Khaled.K

탭이 정말로 필요하다면white-space
Buksy

6
참고-정적 4x &nbsp;(또는 단일 &emsp;)가 절단하지 않고 탭에서와 같이 다음 "4 간격"열에 정렬하려는 경우 (때로는 실제로 0 또는 1 또는 2 또는 예를 들어 일부 텍스트 편집기와 같이 3 줄을 줄 바꿈). 불행히도, 당신은 HTML로 할 수 없습니다 ... <table>s 없이 ... 또한 공간을 사용하여 해킹하려고합니다. ... 고정 글꼴이 필요합니다 .... 대부분의 문제는 고정 글꼴의 필요성과 HTML이 공백을 제거하는 것을 좋아한다고 생각합니다.
Pimp Trizkit

답변:


582

CSS를 사용하는 것이 훨씬 깨끗합니다. padding-left:5em또는 margin-left:5em대신 적절하게 시도하십시오 .


13
CSS로 @Alohci IMHO 패딩은 브라우저에서 텍스트를 확대 / 축소 할 때 텍스트 크기가 커지지 만 AFAIK 패딩이 아니기 때문에 좋지 않습니다.
AlexV

16
@AlexV- em내가했던 것처럼 치수로 사용하면 텍스트 크기로 확장해야합니다. 그렇지 않은 경우에도 사용되는 줌 메커니즘의 특성에 따라 다릅니다.
Alohci

2
@DavidThielen-TAB 요소가 나타난 HTML 3은 브라우저 제조업체에서 시작하지 않았으며 TAB 요소는 구현되지 않았습니다. 대신 HTML 3.2가 다소 단순 해졌고 대신 구현되었습니다.
Alohci

2
@Eoin-참으로. 즉, 이러한 경우 실제로 원하는 것은 탭 중지 입니다. 그러나 그것은 OP가 요구 한 것이 아닙니다. OP는 여러 개의 연속 비 분리 공백을 대체하도록 요청했지만 행을 정렬하지 않았습니다. CSS에는 tab-size실제로 원하는 속성이 있지만 브라우저 지원이 불규칙합니다. 실패하면 테이블 레이아웃 또는 flexbox가 가장 좋습니다.
Alohci

5
이것은 질문에 대답하지 않습니다. kristian의 아래 답변은 사용자가 게시 한 문제를 해결합니다.
Pranavan Maru

1265

사용하려는 문자 세트에 따라 다릅니다.

ISO-8859-1 HTML에 정의 탭 개체가 없습니다 -하지만 이외의 공백 문자의 부부가 &nbsp;같은이 &thinsp;, &ensp;그리고 &emsp;.

ASCII에서 &#09;탭입니다.

다음Wikipedia 에서 HTML 엔터티의 전체 목록과 공백에 대한 유용한 설명입니다 .


2
사이에 어떤 차이 &ensp;&emsp;? 나는 둘 다 정확히 같은 공간을 가지고 테스트했습니다 ..!
Shafizadeh

3
만드는 비밀 소스 & # 09; HTML에서 탭 공간으로 표시되는 것은 공백 CSS 정의입니다. <p style = "display : inline-block; white-space : pre-wrap;"> & # 09; ¡ Muy bien! 태빙은 스페인어와 영어로 작동합니다 </ p>. 공백 : 사전; 작동합니다. CSS :: before Selector tab :: before {content : "\ 0009";}와 함께 "tab"태그 <tab />를 사용할 수도 있지만 강조 표시, 잘라 내기 및 붙여 넣기시 탭으로 표시되지 않습니다 .
Jules Bartow

3
@Shafizadeh W3 사양에서 : 공백은 포인트 크기의 절반이고 em 공백은 현재 글꼴의 포인트 크기와 같습니다. &emsp;약간 큽니다. Chrome 64와 FireFox 58의 차이점을 확인할 수 있습니다.
Dmitry

Crystal Report에서 사용하기 위해 MySQL에서 큰 concat () 쿼리를 작성할 때 이것을 찾고있었습니다. ASCII (& # 09;)가 완벽하게 작업했습니다!
Mike D Wakelyn

이것이 내가 찾던 것입니다. 마지막 줄 정당화 속성을 사용하여 일부 제목을 구분했지만 일부 제목을 나누고 싶지 않습니다. & ensp; 방지했다.
Alex Banman


195

& emsp; 답입니다.

그러나 워드 프로세서에서 Word, Wordperfect, Open Office, Wordworth 등과 같은 워드 프로세서에서 가로 표를 사용하는 데 익숙한 경우 예상대로 작동하지 않습니다. 너비가 고정되어 있으며 사용자 지정할 수 없습니다.

CSS는 W3C가 공식 솔루션을 제공 할 때까지 훨씬 더 강력한 제어 기능을 제공하고 대안을 제공합니다.

예:

padding-left:4em 

..또는..

margin-left:4em 

..적절한

사용하려는 문자 세트에 따라 다릅니다.

일부 탭 태그를 설정하고 h 태그를 사용하는 방법과 유사하게 사용할 수 있습니다.

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... 그런 식으로 사용하십시오 :

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>

위의 스 니펫을 실행하여 시각적 예를 확인하십시오.

추가 토론

ISO-8859-1 HTML에 정의 된 가로 도표 엔터티는 없지만 &nbsp, 예를 들어 평소보다 사용 가능한 다른 공백 문자가 있습니다 . &thinsp;, &ensp;및 전술 &emsp;.

ASCII 및 유니 코드에서는 &#09;가로 표입니다.


2
이것은 W3 유효성 검사기XHTML 에 따르면 유효하지 않습니다
Buksy

& emsp; 이후 절반에 불과합니다. 유효한 W3C 마크 업입니다. 그러나 유리한 CSS 예제를 분명히 언급하고 있습니다. 이 경우 W3C 세트의 일부가 아닌 새로운 마크 업인 사용자 정의 태그를 사용하고 있습니다. W3C 유효성 검사기는 항상 사용자 지정 태그를 오류로 플래그 지정하는 정도까지 엄격합니다. 더 중요한 것은 당신에게 달려 있습니다. 이제 Html 마크 업 세트에 탭이 공식적으로 포함되었습니다. 도움이 되었기를 바랍니다.
WonderWorker 2016 년

2
문자열 값과 HTML 화살표 유형 문자가있는 Swing JTable 헤더의 경우이 문자를 분리 문자로 사용해야하는 경우에 이것을 사용했습니다. 잘 작동합니다! 감사!
Blake Neal

2
"이상하게도 html에 가로 탭이 없습니다"서식이 html에서 CSS로 계속 이동해 왔기 때문에 이상하지는 않을 것입니다. 탭은 시각적 요소 일뿐 아니라 서식 요소 일뿐 아니라 정답이며 잘 설명되어 있습니다.
MikeT

75

빈 공간을 삽입하기 위해 HTML에서 제공하는 3 가지 방법은 다음과 같습니다.

  1. &nbsp;단일 공백을 추가하려면 입력 하십시오.
  2. &ensp;2 개의 공백을 추가하려면 입력 하십시오.
  3. &emsp;4 개의 공백을 추가하려면 입력 하십시오.

3
;그들에게도 추가하십시오 . 처럼&nbsp;
Amio.io

2
이 답변은 실제로 질문에 대한 답변입니다. CSS 답변이 답변으로 표시되는 방식은 어리 석습니다.
Mani

@Mani 2009 년에 질문을 받았으며 2009 년에 수락 된 답변입니다.이 답변은 2018 년에 추가되었습니다. 그런 식으로 보면 어리석지 않습니다.
ᴛʜᴇᴘᴀᴛᴇʟ

@ ᴛʜᴇᴘᴀᴛᴇʟ 이것이 실제로 질문에 대한 답변인지 아닌지에 대해 표시된 질문에 대한 답이 정확하지 않은 경우 잊어 버리려고합니다.
Mani

이것이 실제 정답입니다. 감사!
Ariel Monaco


52

단락 내부 (또는 중간)에 여러 공백을 삽입하는 쉬운 방법은 없습니다. CSS 사용을 제안하는 사람들에게는 요점이 없습니다. 항상 한 쪽에서 단락을 들여 쓰려고하는 것은 아니지만 실제로 특정 지점에 추가 공백을 두려고합니다.

본질적으로,이 경우, 공간이 될 내용없는 스타일. 왜 그렇게 많은 사람들이 그것을 보지 못하는지 모르겠습니다. 나는 그들이 스타일과 내용 규칙의 분리를 시행하려고하는 강성을 추측합니다 (HTML은 처음부터 두 가지를 모두 수행하도록 설계되었습니다- 더 많은 비용을 들이지 않고 적절한 태그를 사용하여 고유 한 요소의 스타일을 정의하는 데 아무런 문제가 없습니다. CSS 스타일 시트를 작성하는 데 시간이 걸리며 적당히 사용될 때 읽을 수있는 것이 전혀 없습니다. 빠른 작업을 수행 할 수 있다는 말도 있습니다.) 공백 문자 만 사용하는 것으로 간주 할 수있는 방법으로 변환합니다. 스타일과 들여 쓰기.

그리고 태그 &emsp;&nbsp;태그 에 의존하지 않고 공백을 삽입 할 수있는 우아한 방법이 없으면 많은 공간을 빠르게 삽입 할 수있는 적절한 이름의 태그가있는 경우보다 결과 코드를 훨씬 더 읽을 수 없게된다고 주장합니다 (또는 아시다시피, 공간이 불필요하게 소비되지 않은 경우).

그러나 위에서 말했듯이 가장 좋은 방법은 &emsp;올바른 위치에 삽입하는 것입니다.


1
HTML은 처음부터 사용자 정의 스타일로 디자인되지 않았습니다.
Markus Unterwaditzer

들여 쓰기가 항상 사람들이 원하는 것이 아닌지에 대한 당신의 요점을 사랑하십시오!
레드 울프 프로그램

46

사전 태그 를 사용하는 것이 좋습니다 . 사전 태그를 정의 텍스트를 미리 포맷.

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

이 링크 에서 프리 태그에 대해 더 알고


1
@HuzaifaSaifuddin은 무슨 뜻인가요? <pre>되는 HTML5 표준화 HTML4에서와 같은 행동.
Sumit

나는 동의 .. 미안 해요 그나마 알고 Y 내가 그 쓴 나는 무엇을 say..Sorry 잘못된 정보에 대한
Huzaifa 인 Saifuddin

스프레드 시트에 붙여 넣을 출력 형식을 지정했으며 \ t 문자를 삽입하여 탭을 지정할 수있었습니다. 분명히 내 대답이었다. 좋다.
Craig Brett

1
이것이 가장 좋은 옵션 IMHO입니다. 또한 <pre>에 스타일 정의를 적용 할 수 있으므로 필요한 경우 올바른 '모노 스페이스'글꼴을 사용할 수 있습니다. 예 : pre {font-family : "Lucida Console", 모나코, 모노 스페이스; 글꼴 크기 : 90 %; }
reverpie

41

나는 방법을 찾고있는 동안 이것을 만났고 원하는 것에 대해 쉽게 작동하는 것처럼 보이는 내 자신을 알아 냈습니다. 나는 여기에 게시하는 것이 처음이므로 이것이 효과가 있기를 바랍니다 ...하지만 CSS에는이 기능이 있습니다.

span.tab{
    padding: 0 80px; /* Or desired space*/
}

그런 다음 HTML에서 내가 필요한 것처럼 중간 문장의 "긴 탭"이되도록하십시오.

<span class="tab"></span>

금액 &nbsp;또는 &emsp;필요한 금액을 저장 합니다.

이것이 누군가를 돕는 데 도움이되기를 바랍니다.


3
span정확히 탭이 아니라 태그 의 왼쪽에 80px, 오른쪽에 80px를 추가합니다 .
mcont

CSS가 스타일링을 수행하는 동안 약간의 마크 업 만 추가하므로 여전히 영리한 응답입니다.
invot



9

공백이 그렇게 중요 해지면 미리 포맷 된 텍스트와 <pre> 태그를 사용하는 것이 좋습니다.


OP는 공백에 대해 그다지 중요하지 않으며 여러 개의 바로 가기에 대해서만 물었습니다 &nbsp;. <pre>태그를 호출하면 추가 작업이 많이 발생합니다.
동 형사상

모노 스페이스 글꼴을 피하려면 css "white-space : pre-wrap"을 사용하십시오.
hultqvist

공백은 문제가 that important아닙니다. 인생의 사실입니다.
레드 울프 프로그램

9

단락의 첫 번째 문장을 들여 쓰기하려면 작은 CSS 트릭으로 할 수 있습니다.

p:first-letter {
    margin-left: 5em;
}

네. 그것도 작동합니다. :first-letter요점은 첫 문장 만 들여 쓰기하는 경우에만 착용하십시오 .
peirix

9

HTML3에 도입 되었음에도 불구하고 <tab> 태그는 브라우저에 포함되지 않았습니다. 나는 우리가 그것을 이용할 수 있다면 많은 상황에서 인생이 훨씬 쉬울 것이기 때문에 항상 그것이 진짜 동정이라고 생각했습니다. 그러나이 문제를 쉽게 해결하여 가짜 <tab> 태그를 얻을 수 있습니다. HTML 헤드에 다음을 추가하거나 (스타일 태그없이) CSS에 추가하십시오.

<style>
    tab { padding-left: 4em; }
</style>

그때부터 문서에 탭이 필요할 때 <tab>을 넣으십시오. 탭 표시에 맞지 않기 때문에 진정한 탭은 ​​아니지만 서투른 문자 엔터티 또는 범위로 디더링하지 않고도 대부분의 요구에 적합합니다. 소스를 확인하기가 쉬워지고 번거로운 테이블이나 다른 복잡한 "솔루션"으로 가고 싶지 않은 간단한 것들을 포맷 할 수 있습니다.

이 솔루션의 좋은 점 중 하나는 텍스트 문서를 빠르게 검색 / 바꾸어 모든 탭을 <tab> 태그로 바꿀 수 있다는 것입니다.

여러 개의 절대 위치 탭을 정의한 다음 필요한 곳에서 적절한 탭 (예 : <tab2> 또는 <tab5> 등)을 사용할 수 있지만 다음 줄을 들여 쓰지 않고는 그렇게 할 수있는 방법을 찾지 못했습니다 .


7

테이블을 사용 width하고 첫 번째에 속성을 적용 할 수 있습니다 <td>.

암호:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

결과

Content1       Content2
Content3       Content4

감사!! 이것은 CSS가 불가능한 상황에 가장 적합하고 가장 일반적인 솔루션입니다.
John Henckel

6

인라인 스타일링으로 범위를 사용했습니다. 일반 텍스트 문자열을 처리 할 때이 작업을 수행해야했으며 \ t를 4 개의 공백 (appx)으로 바꿔야합니다. &nbsp;최종 마크 업에 내용 공간이 없도록 해석되는 과정에서 더 이상 사용할 수 없었 습니다.

HTML :

<span style="padding: 0 40px">&nbsp;</span>

나는 이것을 PHP 함수에서 다음과 같이 사용했다 :

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

6

탭이 하나만 필요한 경우 다음이 저에게 효과적이었습니다.

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

HTML과 같은 :

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p> 

"탭"스타일을 추가하고 다음과 같이 HTML을 변경하여 "탭"을 더 추가 할 수 있습니다.

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

HTML과 같은 :

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

4

CSS를 사용하는 경우 다음을 제안합니다.

p:first-letter { text-indent:1em; }

이것은 전통적인 출판물에서와 같이 첫 줄을 들여 쓰기합니다.


4

간단한 CSS가 있습니다.

white-space: pre;

HTML에 추가 한 공백을 통합하지 않고 유지합니다.


3
<span style="margin-left:64px"></span>  

다음과 같이 고려하십시오. 하나의 탭은 64 픽셀과 같습니다. 이것이 우리가 CSS로 줄 수있는 공간입니다.


3

다음과 같이 style = "white-space : pre"를 사용할 수 있습니다.

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

내부의 빈 공간은 탭으로 채워져 있으며 탭의 양은 텍스트에 따라 다릅니다.

다음과 같이 보일 것입니다 :

Text    : value
Text2   : value2
Text32  : value32

3

사용해야하는 이상적인 CSS 코드는 "display"및 "min-width"속성의 조합이어야합니다.

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

2

글 전체에서 단 한 줄의 시작 부분에 긴 공백이 필요한 경우 해결책이 될 수 있습니다.

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

쓰기가 너무 많거나 여러 곳에서 이러한 탭이 필요한 경우이 작업을 수행 할 수 있습니다

<span class='tab'>&nbsp;</span>

그런 다음 이것을 CSS에 포함하십시오.

span.tab {display:inline-block;height:1em;width:4em;}

2

글 머리 기호가없는 목록을 사용하여 "탭이있는"모양을 만듭니다. (MS Word를 사용할 때 때때로하는 일입니다)

CSS 파일에서 :

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

그리고 HTML 파일에서 정렬되지 않은 목록을 사용하십시오.

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

이 솔루션의 장점은 중첩 된 목록을 사용하여 추가 들여 쓰기를 할 수 있다는 것입니다.

여기서 말하는 멍청한 놈이므로 오류가 있으면 의견을 말하십시오.


(x) HTML은 문서의 내용을 지정해야하며 CSS가 문서를 표시하는 방법을 처리해야합니다. 테이블을 사용하지 않는 데이터에 테이블을 사용하여 웹 페이지를 배치해서는 안되는 이유가 있습니다.
Nielsvh

1

우리는 사용자 정의 공간 범위 클래스를 사용합니다

<span class='space'></span>

CSS에 공간 클래스를 포함하십시오.

.space 
{
   margin-left:45px;
}

1
Alohci의 답변 에서처럼 브라우저 텍스트 줌을 허용 하려면 em/ rem측정을 사용하십시오 .
Charlie Harding

0

CSS와 모범 사례를 사용하면 중첩 된 들여 쓰기 메뉴의 동적 작성은 다음과 같습니다.

  1. indent1, indent2 등의 각 중첩에 대해 각각 고유 한 왼쪽 여백을 지정하여 스타일을 만듭니다. 사이트 구조는 3 단계의 중첩 수준을 넘어서는 안됩니다.
  2. 자체 재귀 함수 내에서 정적 변수 (정수)를 사용하여 재귀를 추적하십시오.
  3. 각 루프에 대해 indentPHP 또는 ASP와 같은 서버 측 스크립팅을 사용하여 단어에 루프 번호를 추가하여 이러한 메뉴가 CSS에 의해 적절하게 형식화되도록하십시오.

또는 정적 변수를 반복하여 여러 개 &nbsp;또는 <pre>태그 또는 다른 문자를 사용하여 간격을 추가하십시오 .

가로 탭 문자를 테스트 한 &#09;결과 , &nbsp;내가 설명한 시나리오에서 가로 문자 를 여러 문자 로 대체 할 수 없다는 것을 알았습니다 . 다른 결과가있을 수 있습니다.


0

이것은 추악한 해결책이지만 조금만 할 수 있습니다.

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

그런 다음 문자열에서 tab 변수를 사용하십시오.


0

"pre"태그 만 :

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

이 태그에 CSS 클래스를 적용 할 수 있습니다.


0

나는 단순히 추천 할 것이다 :

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>

0
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

색상 코드가 px가 탭의 원하는 길이로 변하는 배경과 일치하는지 확인하십시오.

그런 다음 <t>. </ t> 뒤에 텍스트를 추가하십시오.

마침표는 스페이스 홀더로 사용되며 입력하기가 쉽지만 '& # 160;' 컬러 코딩이 상대적이지 않도록주기 대신에 사용될 수있다.

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

스크립트의 다른 부분에서 유용 할 수 있지만 주로 텍스트 단락을 표시하는 데 유용합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.