ਫਰਮਾ:Dropinitial/doc ਲਈ ਸਰੋਤ ਵੇਖੋ

{{documentation subpage}}{{template shortcut|di}}
{{high-use|88000}}
{{Span-based-template}}
{{uses TemplateStyles|Template:Dropinitial/styles.css}}
==Usage==
{{clear}}
This template is for creating the "drop [[w:initial|initial]]" effect that is common in both modern and antiquated typography:

[[File:Drop initial example.jpg|center|250px|thumb|Used with parameters '''<nowiki>{{</nowiki>dropinitial{{Unicode|&#x007C;}}''L''{{Unicode|&#x007C;}}''2.4em''{{Unicode|&#x007C;}}''0em''{{Unicode|&#x007C;}}''.05em''<nowiki>}}</nowiki>''' within a block of Times New Roman text.]]

== To use ==

'''<nowiki>{{</nowiki>dropinitial| ''content'' | ''font-size'' | ''margin-top'' | ''margin-right'' | ''margin-bottom'' | ''margin-left'' | z-index=''#''<nowiki>}}</nowiki>'''.

Note that positional parameters 2 through 6, also have corresponding named parameters aligning with their function as shown in the above example.

The ''font-size'' parameter and margin value parameters should be specified with relative units, i.e. as a percent or in '[[w:Em (typography)|em]]' units.

The only necessary parameter is the first one (the initial). If no others are set, the defaults are:

* font-size = 3em
* margin-right = .1em

Which should produce a drop initial approximately the height of two lines in the current Wikisource default font:

<pre><nowiki>
{{dropinitial|L}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
rhoncus ut, imperdiet a, venenatis vitae, justo.
</nowiki></pre>

{{dropinitial|L}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
{{clear}}

; Notes <nowiki>:</nowiki>
: Dropped initials are typically used with small capitals for the other letters of the word starting with this initial. See {{Tl|Small-caps}}.
: Fonts can be rendered slightly differently in different browsers and on different operating systems. You may wish to check your work in [[w:Mozilla Firefox|Mozilla Firefox]], [[w:Safari (web browser)|Apple Safari]], [[w:Opera (web browser)|Opera]], [[w:Internet Explorer|Windows Internet Explorer]] or other [[w:List of web browsers|web browsers]] on different computers to ensure that the text wraps around the initial in the way you expect it to if you are not using the default values.

=== Using images ===

You can use the {{parameter|image}} parameter and the text in parameter {{parameter|1}} will be the alt text. If this is not provided, the page will be added to [[:Category:Dropinitials with image but no alt text]]. Use {{parameter|imgsize}} for the image size (this has to end in "px").

You can also use an image as the contents in {{parameter|1}}. '''When doing this,you must set the "alt" attribute to the letter in question. This allows people with text readers to see the text, and allows the text to be copied properly.'''

 <nowiki>{{dropinitial|L|image=Chronica Polonorum L.jpg|imgsize=50px}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
 eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
 vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</nowiki>
{{dropinitial|L|image=Chronica Polonorum L.jpg|imgsize=50px}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
{{clear}}

===Margin examples===
{|
!Default
!Top, 0.1em
!Bottom, 1em
!Left, −0.5em
|-
|{{dropinitial|L|image=Chronica Polonorum L.jpg|imgsize=50px}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|{{dropinitial|L|image=Chronica Polonorum L.jpg|imgsize=50px||.1em}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|{{dropinitial|L|image=Chronica Polonorum L.jpg|imgsize=50px||||1em}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|{{dropinitial|L|image=Chronica Polonorum L.jpg|imgsize=50px|||||-.5em}}{{Small-caps|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|}

===Use with quotes===
Occasionally these works will have a quote (") that appears with the drop initial.  The means to handle this is like using the {{parameter|fl}} parameter:

:<code><nowiki>{{Dropinitial|P|fl="}}</nowiki></code> gives:
{{Dropinitial|P|fl="}}
{{-}}

===Text indent===

If you need to set a text indent, use the {{parameter|text-indent}} parameter. Generally, drop initials have zero indent, even if "normal" paragraphs have them, and this is therefore the default.

{{doc example|1=
<pre>
{{dropinitial|L|text-indent=2em}}{{lorem ipsum}}

{{dropinitial|L|fl="|text-indent=2em}}{{lorem ipsum}}
</pre>

{{dropinitial|L|text-indent=2em}}{{lorem ipsum}}

{{dropinitial|L|fl="|text-indent=2em}}{{lorem ipsum}}
}}

=== Use within a list===
When using a drop initial within a list, an adjustment will need to be made from 

<syntaxhighlight lang="wikitext">
* {{dropinitial|I}}Tem
* Item 2 
* Item 3
</syntaxhighlight>

* {{dropinitial|I}}Tem
* Item 2 
* Item 3

to the following,  

<syntaxhighlight lang="wikitext">
* [[Example link|{{{{BASEPAGENAME}}|I}}Tem]] 
* <li style="position:relative; left:1em; margin-left:-1em;">Item 2 
* Item 3
</syntaxhighlight>

Otherwise the list marker will overlap the bottom of the Drop initial. The values needed will vary depending on the size of the Dropinitial, and content immediately preceding it in a list item.

* {{{{BASEPAGENAME}}|I}}Tem
* <li style="position:relative; left:1em; margin-left:-1em;">Item 2
* Item 3

== Typography notes ==

If you simply need to have an ''enlarged'' initial in a text, which is not dropped below the baseline, use the template {{tl|largeinitial}}:

:{{largeinitial|L}}orem ipsum sit amet...

== Technical notes ==

This template simply generates a left-floated span (w/style <code>display: block;</code>) containing ''content'' with the proper CSS styles applied to it. Unfortunately the [http://www.w3.org/TR/css3-linebox/#initial-letter-styling CSS 3 styles specifically directed at formatting drop initials] are implemented only in Safari at this point (see [https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter this documentation] at MDN Web Docs). In planning for the future this template applies a class "dropinitial" to the output span.

As a floated element, this template may interact with other floated elements in an manner which editors may not expect, especially if they are unfamiliar with CSS float positioning. In such cases, the following may be useful:
* Use of the <code>fl</code> parameter 
* Careful use of {{tl|float left/s}} to consolidate preceding floated blocks into a single container.
* Asking for assistance at [[WS:Scriptorium/Help]]

=== Tracking categories ===

* [[:Category:Dropinitials with image]] (only tracks users of {{parameter|image}} parameter)
* [[:Category:Dropinitials with image in parameter 1]] (only images ''not'' in the {{parameter|image}} parameter)
* [[:Category:Dropinitials with image but no alt text]]
* [[:Category:Dropinitials with no initial]]
* [[:Category:Dropinitials using font-size]]
* [[:Category:Dropinitials using margin-top]]
* [[:Category:Dropinitials using margin-right]]
* [[:Category:Dropinitials using margin-bottom]]
* [[:Category:Dropinitials using margin-left]]
* [[:Category:Dropinitials using text-indent]]
* [[:Category:Dropinitials using fl]]
* [[:Category:Dropinitials using z-index]]
* [[:Category:Dropinitials using fontfam]]

===Template data===
{{TemplateDataHeader}}
<templatedata>
{
    "description": "Add a 'drop capital', either text or an image",
    "params": {
        "1": {
            "label": "1",
            "description": "The text of the drop capital.",
            "type": "line",
            "required": true
        },
        "image": {
            "label": "image",
            "description": "The image to use, if any.",
            "type": "wiki-file-name",
            "required": false
        },
        "imgsize": {
            "label": "imgsize",
            "description": "The image size",
            "example": "50px",
            "type": "line",
            "required": false
        },
        "fl": {
            "label": "fl",
            "description": "Float-left content, if any (often a quote mark)",
            "example": "\"",
            "type": "line",
            "required": false
        },
        "font-size": {
            "label": "font-size",
            "description": "Font size (in CSS units). Has no meaning if an image is set.",
            "example": "2em",
            "default": "3em",
            "type": "line",
            "required": false,
            "aliases": [ "2" ]
        },
        "z-index": {
            "label": "z-index",
            "description": "Element z-index",
            "example": "2",
            "type": "number",
            "required": false
        },
        "margin-top": {
            "label": "margin-top",
            "description": "Top margin (in CSS units)",
            "example": "1em",
            "default": "0em",
            "type": "line",
            "required": false,
            "aliases": [ "3" ]
        },
        "margin-right": {
            "label": "margin-right",
            "description": "Right margin (in CSS units)",
            "example": "1em",
            "default": "0.1em",
            "type": "line",
            "required": false,
            "aliases": [ "4" ]
        },
        "margin-bottom": {
            "label": "margin-bottom",
            "description": "Bottom margin (in CSS units)",
            "example": "1em",
            "default": "0",
            "type": "line",
            "required": false,
            "aliases": [ "5" ]
        },
        "margin-left": {
            "label": "margin-left",
            "description": "Left margin (in CSS units)",
            "example": "1em",
            "default": "0",
            "type": "line",
            "required": false,
            "aliases": [ "6" ]
        }
    },
    "paramOrder": [
        "1",
        "fl",
        "font-size",
        "image",
        "imgsize",
        "margin-top", "margin-right", "margin-bottom", "margin-left",
        "z-index"
    ],
    "format": "inline"
}
</templatedata>

==See also==
* {{tl|Largeinitial}}, for large initials that sit on the same baseline as surrounding text and extend upwards
* {{tl|Initial}}, to simplify drop initials, small caps, numbering etc. from the start of paragraphs into a single template
* {{tl|Img float#Polygon shape outlines}}, for a large initial a with polygonal outline; needed when the image has a non-rectangular shape around which the surrounding text flows.
<!-- template categories and interwiki links -->
<includeonly>
[[Category:Typography templates]]
</includeonly>