سانچہ:Col head/doc کا مسودہ

{{Documentation subpage}}
{{Uses TemplateStyles|Template:Col head/styles.css}}
{{CSS3 multiple column layout}}
This template is for creating headings that are designed to work well with CSS columns, such as those generated by {{tl|div col}} and {{tl|columns-list}}. Using this template prevents the heading from being placed at the very bottom of a column, which is usually undesirable.

With the optional <code>force</code> parameter, you can also force a column break to occur immediately before this heading. This can be useful if you have two semi-related lists that you want to put in the same set of columns without allowing them to mi (for example, you might use it in a sports roster to separate the players from the staff).

==Usage==
;Basic usage
:<code><nowiki>{{col head|Your heading here}}</nowiki></code>

;All parameters
:<code><nowiki>{{col head|Your heading here|type=|force=y|style=|class=}}</nowiki></code>

===Parameters===
;1st parameter
:The text content of your heading

;<code>|type=</code>
:The type of heading to use. The value should be one of the following: {{ulist
  | '''<code>bold</code>''' (default): Creates a pseudo-heading with bold text {{ulist
    | Wikitext equivalent: <code><nowiki>'''Your heading here'''</nowiki></code>
    | Aliases: <code>strong</code>, <code>b</code>
  }}
  | '''<code>h1</code>, <code>h2</code>, ..., <code>h6</code>''': Creates a section heading {{ulist
    | Wikitext equivalent: <code>h4</code> → <code><nowiki>==== Your heading here ====</nowiki></code>
    | Aliases: <code>1</code>, <code>2</code>, ... <code>6</code>
  }}
  | '''<code>term</code>''': Creates a <code>dt</code> element, for use as a term in a [[MOS:GLOSS|glossary]] {{ulist
    | '''Warning:''' [[MOS:PSEUDOHEAD|For accessibility reasons]], this should not be used without a definition tag following it. Use the <code>bold</code> option instead.
    | Wikitext equivalent: <code><nowiki>; Your heading here</nowiki></code>
    | Aliases: <code>dt</code>
  }}
  | '''<code>none</code>''': Creates a <code>div</code> element with unstyled text {{ulist
    | Wikitext equivalent: <code><nowiki>Your heading here</nowiki></code>
    | Aliases: <code>div</code>, <code>n</code>
  }}
}}

;<code>|force=y</code>
:If set, it will try to force a column break to occur immediately before this heading. This means that the heading will appear at the start of the next column. {{ulist
  | '''Warning:''' A column break may not appear in some circumstances, such as if the viewport is too narrow. If you need a column break to occur even on very narrow screens, CSS columns are probably are not the right choice; try {{tl|Col-begin}} instead.
}}

;<code>|style=</code>
:Additional CSS to be added to the heading element

;<code>|class=</code>
:CSS class(es) to be added to the heading element

==Known issues==
{{as of|2020|06|post=,}} there are no browsers with CSS support for <code>break-after: avoid-column</code>, so this template uses a hacky workaround with <code>break-inside: avoid-column</code> to emulate that behavior. This workaround results in two edge case bugs (though they're both unlikely to occur in normal use cases for this template).

===Very short container===
If the height of your columns container is less than 5em (equal to 70px at normal font size in the Vector theme), 5em=70px), the browser will think that your <nowiki>{{col head}}</nowiki> is taller than the container. Chrome handles this by simply making the container taller, which looks fine. Firefox, on the other hand, ends up placing subsequent elements in very weird positions on the page, which looks very bad.

In general, avoid using this template in very short columns boxes. It seems unlikely that you would need this template in such a scenario anyway; with so little content, you would likely be better off using fixed or float columns rather than CSS columns.

===Tall next sibling===
If a heading is immediately followed by an element that has a height of at least 5em and cannot have a break inside it (such as an element with <code>break-inside: avoid-column</code>), it would likely cause the column breaks to be inserted in odd places (this has not been tested). This means this template may not play nicely with large unbreakable elements such as images, but most typically-formatted elements should be fine.

==TemplateData==
{{TemplateData header}}
<templatedata>
{
	"params": {
		"1": {
			"label": "Text",
			"description": "The text to be used for your heading",
			"type": "content",
			"required": true
		},
		"type": {
			"label": "Type",
			"description": "The style of heading to use. Options: h1, h2, ..., h6, bold, term, none",
			"type": "line",
			"default": "bold"
		},
		"force": {
			"label": "Force column break?",
			"description": "If set to any value, a column break will occur immediately before this heading (meaning this heading will be placed at the top of the next column)",
			"type": "boolean"
		},
		"style": {
			"label": "Style",
			"description": "Additional CSS to apply to the heading tag",
			"example": "color:blue; text-align:center;",
			"type": "string"
		},
		"class": {
			"label": "Class",
			"description": "Additional CSS class(es) to add to the heading tag",
			"type": "string"
		}
	},
	"description": "This template is for creating headings that are designed to work well with CSS columns, such as those generated by {{div col}} and {{columns-list}}. Using this template prevents the heading from being placed at the very bottom of a column, which is usually undesirable.",
	"paramOrder": [
		"1",
		"type",
        "force",
		"style",
        "class"
	],
	"format": "inline"
}
</templatedata>

<includeonly>[[Category:List formatting and function templates]]
[[Category:Multi-column templates]]</includeonly>