How to enlarge the first letter of a header


#1

I am using jQuery Mobile Collapsible Control and want to make the first letter of the header larger than the rest of the letters in the header… I’ve attempted many variations of ‘in-line’ style of HTML and nothing works so far…
Would appreciate the HTML solution… Thanks… Tom


#2

This feels really hacky, but it works:

Function Main()
  Dim firstSize = 22
  Dim otherSize = 12
  Dim firstChar = "H"
  Dim otherChars = "eading"
  Dim first = "<span style=""font-size: " & firstSize & "px;"">" & firstChar & "</span>"
  Dim other = "<span style=""font-size: " & otherSize & "px;"">" & otherChars & "</span>"
  Dim text = first & other & "<span class=""ui-collapsible-heading-status"">click to expand contents</span>"
  $("#Collapsible1 a")[0].innerHTML = text
End Function

Kind regards,
Doug


#3

Thanks, Doug… Appreciated!..

Tom


#4

Doug, I’ve found that if I insert <span style=font-size:20px;color:Royalblue>P</span>roject Plan in the “header” field of the Collapsible control, it works… The resulting header consists of a size 20, blue “P” and size 12 black “roject Plan”. I could not have done this without your help… Thanks again!