• Category Archives Rendering

  • HTML4 elements

    Posted on by tenman Comment

    Note

    以下のスタイルシートリンクが、footerの後方に配置されているため、Markup Validation Service でエラーを発生させます

    現状では、Raindropsでは、対応していません


    <link rel='stylesheet' id='mediaelement-css' href='http://www.tenman.info/wp-37/wp-includes/js/mediaelement/mediaelementplayer.min.css?ver=2.13.0' type='text/css' media='all' />
    <link rel='stylesheet' id='wp-mediaelement-css' href='http://www.tenman.info/wp-37/wp-includes/js/mediaelement/wp-mediaelement.css?ver=3.9.1' type='text/css' media='all' />

    XHTML Elements

    xhtmlで使われる主要な要素を記述しています

    address

    address ABCD abcd えいびぃしぃでぃ　瑛美市出

    blockquote

    blockquote ABCD abcd えいびぃしぃでぃ　瑛美市出

    dl　dt dd

    dt ABCD abcd えいびぃしぃでぃ　瑛美市出
    dd
    あいうえお
    abc　
    ａｂｃ　
    abc
    ａｂｃ

    fieldset legend

    fieldset fieldset ABCD abcd えいびぃしぃでぃ　瑛美市出 tabindexは指定できません

    form

    form ABCD abcd えいびぃしぃでぃ　瑛美市出

    見出し

    h2-h6

    h2      ABCD abcd えいびぃしぃでぃ　瑛美市出

    h3      ABCD abcd えいびぃしぃでぃ　瑛美市出

    h4      ABCD abcd えいびぃしぃでぃ　瑛美市出

    h5      ABCD abcd えいびぃしぃでぃ　瑛美市出
    h6      ABCD abcd えいびぃしぃでぃ　瑛美市出

    object

    画像切り替え　等価な内容の記述

    ol

    1. ol
    2. あいうえお
    3. abc　
    4. ａｂｃ　
    5. abc
    6. ａｂｃ

    p

    p ABCD abcd えいびぃしぃでぃ　瑛美市出

    ul

    • ol
    • あいうえお
    • abc　
    • ａｂｃ　
    • abc
    • ａｂｃ

    hr

    pre

     pre ABCD abcd えいびぃしぃでぃ　瑛美市出

    table tr td

    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ

    table thead th tbody tfoot tr td

    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ

    table tr td col

    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ

    table tr td colgroup

    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ

    table tr td caption

    caption ABCD abcd えいびぃしぃでぃ　瑛美市出
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ
    ol あいうえお abc　 ａｂｃ　 abc ａｂｃ

    form input type=text

    form


    form input type=radio

    form

    グループ１(xhtml)

    グループ2(html5)

    form　type="checkbox"

    グループ2(html5)

    FORM SELECT NAME="SAMPLE1" SIZE="3" MULTIPLE

    グループ3

    form　type="submit" type="reset"

    html4

    form　type="password" name="pass" size="30" maxlength="30"

    html4

    form　type="file" name="sample" size="30"

    form　textarea wrap="hard"

    b

    b ABCD abcd えいびぃしぃでぃ　瑛美市出

    非推奨　物理的フォントタグ　論理的タグ推奨　代替：strong

    strong

    strong ABCD abcd えいびぃしぃでぃ　瑛美市出

    blockquote

    blockquote ABCD abcd えいびぃしぃでぃ　瑛美市出

    i

    i ABCD abcd えいびぃしぃでぃ　瑛美市出

    非推奨　物理的フォントタグ　論理的タグ推奨　代替： em

    cite

    cite ABCD abcd えいびぃしぃでぃ　瑛美市出

    引用語句の意味で使用し、イタリック体

    em

    em ABCD abcd えいびぃしぃでぃ　瑛美市出

    強調の意味で使用し、イタリック体

    var

    var ABCD abcd えいびぃしぃでぃ　瑛美市出

    変数の意味で使用し、イタリック体

    address

    address ABCD abcd えいびぃしぃでぃ　瑛美市出

    pre

     pre ABCD abcd えいびぃしぃでぃ　瑛美市出

    code

    code ABCD abcd えいびぃしぃでぃ　瑛美市出

    プログラムコードの意味で使用し、等幅フォント

    kbd

    kbd ABCD abcd えいびぃしぃでぃ　瑛美市出

    ユーザが入力する文字列

    samp

    samp ABCD abcd えいびぃしぃでぃ　瑛美市出

    サンプル

    pre

     pre ABCD abcd えいびぃしぃでぃ　瑛美市出

    small

    small ABCD abcd えいびぃしぃでぃ　瑛美市出

    sub

    1 sub ABCD abcd えいびぃしぃでぃ　瑛美市出

    sup

    1 sup ABCD abcd えいびぃしぃでぃ　瑛美市出

    del

    the xmp element contains preformatted text in which markup other than an end tag is treated as literal text.

    ins

    山田を見ていた。

    いや、睨んでいたというべきか。

    彼はまるで気付かないでいた。


    HTML4 Rendering Unit Test

  • Check wpautop

    Posted on by tenman Comment

    div check

    div 要素でラップされた段落p要素の記述を行わない場合

    test

    test

    test

     

    div 要素で2重にラップされた段落pを記述しています

    test

    test

    test

     

    div 要素で3重にラップされたP要素を記述しています

    この場合、wpautopは、p要素の追加に失敗しますが（3.9）Raindropsは補正し正常に表示されていることを確認してください

    test

    test

    test

     

    div 要素で2重にラップされたP要素を記述しないでwpautopでpを追加します

    この場合、wpautopは、p要素の追加に失敗しますが（3.9）Raindropsは補正し正常に表示されていることを確認してください

    no wrap p

    no wrap p

    no wrap p

     

    div 要素で3重にラップされたP要素を記述しないでwpautopでpを追加します

    この場合、wpautopは、p要素の追加に失敗しますが（3.9）Raindropsは補正し正常に表示されていることを確認してください

    no wrap p

    no wrap p

    no wrap p

     

    div child table

    div 要素でラップされた内側にtable要素を記述した例です

    身近な果物
    名称 味の特徴 色
    りんご 甘酸っぱい おおむね赤
    なつみかん かなり酸っぱいと思う たいてい黄色

    div 要素で2重にラップされた内側にtable要素を記述した例です

    身近な果物
    名称 味の特徴 色
    りんご 甘酸っぱい おおむね赤
    なつみかん かなり酸っぱいと思う たいてい黄色

    table

    tdの内側にpを使用していません

    pなし

    tdの内側にpを使用しています

    身近な果物
    名称 味の特徴 色
    果実総括 味覚総括 色彩総括
    りんご 甘酸っぱい おおむね赤
    なつみかん かなり酸っぱいと思う たいてい黄色
    EmployeeSalary
    example.com example example
    example.com example example
    example.com example example
    example.com example example

    Rendering Unit Test

  • Accessible Table

    Posted on by tenman Comment
    食事を楽しもう
    タイムスケジュール 講演内容 会場
    　から　　迄 山田太郎 おいしい目玉焼きの作り方 3F社員食堂
    　から　　迄 山田太郎 おいしい目玉焼きの作り方 3F社員食堂
    　から　　迄 山田太郎 おいしい目玉焼きの作り方 3F社員食堂
    　から　　迄 山田太郎 おいしい目玉焼きの作り方 3F社員食堂
    　から　　迄 山田太郎 おいしい目玉焼きの作り方 3F社員食堂
    　から　　迄 山田太郎 おいしい目玉焼きの作り方 3F社員食堂

    Notation Rendering Unit Test

  • Readability Test-2

    Posted on by tenman Comment

    All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, “Oh, why can’t you remain like this for ever!" This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.

    Continue reading → Post ID 2029
    Rendering Unit Test 📎and tagged

  • Edge Case: Nested And Mixed Lists

    Posted on by tenman Comment

    Nested and mixed lists are an interesting beast. It’s a corner case to make sure that

    • Lists within lists do not break the ordered list numbering order
    • Your list styles go deep enough.

    Ordered -- Unordered -- Ordered

    1. ordered item
    2. ordered item
      • unordered
      • unordered
        1. ordered item
        2. ordered item
    3. ordered item
    4. ordered item

    Ordered -- Unordered -- Unordered

    1. ordered item
    2. ordered item
      • unordered
      • unordered
        • unordered item
        • unordered item
    3. ordered item
    4. ordered item

    Unordered -- Ordered -- Unordered

    • unordered item
    • unordered item
      1. ordered
      2. ordered
        • unordered item
        • unordered item
    • unordered item
    • unordered item

    Unordered -- Unordered -- Ordered

    • unordered item
    • unordered item
      • unordered
      • unordered
        1. ordered item
        2. ordered item
    • unordered item
    • unordered item

    Rendering Unit Test 未分類 📎and tagged

  • Post Format: Chat

    Posted on by tenman Comment

    Abbott
    Strange as it may seem, they give ball players nowadays very peculiar names.
    Costello
    Funny names?
    Abbott
    Nicknames, nicknames. Now, on the St. Louis team we have Who’s on first, What’s on second, I Don’t Know is on third--
    Costello
    That’s what I want to find out. I want you to tell me the names of the fellows on the St. Louis team.
    Abbott
    I’m telling you. Who’s on first, What’s on second, I Don’t Know is on third--
    Costello
    You know the fellows’ names?
    Abbott
    Yes.
    Costello
    Well, then who’s playing first?
    Abbott
    Yes.
    Costello
    I mean the fellow’s name on first base.
    Abbott
    Who.
    Costello
    The fellow playin’ first base.
    Abbott
    Who.
    Costello
    The guy on first base.
    Abbott
    Who is on first.
    Costello
    Well, what are you askin’ me for?
    Abbott
    I’m not asking you--I’m telling you. Who is on first.
    Costello
    I’m asking you--who’s on first?
    Abbott
    That’s the man’s name.
    Costello
    That’s who’s name?
    Abbott
    Yes.
    Costello
    When you pay off the first baseman every month, who gets the money?
    Abbott
    Every dollar of it. And why not, the man’s entitled to it.
    Costello
    Who is?
    Abbott
    Yes.
    Costello
    So who gets it?
    Abbott
    Why shouldn’t he? Sometimes his wife comes down and collects it.
    Costello
    Who’s wife?
    Abbott
    Yes. After all, the man earns it.
    Costello
    Who does?
    Abbott
    Absolutely.
    Costello
    Well, all I’m trying to find out is what’s the guy’s name on first base?
    Abbott
    Oh, no, no. What is on second base.
    Costello
    I’m not asking you who’s on second.
    Abbott
    Who’s on first!
    Costello
    St. Louis has a good outfield?
    Abbott
    Oh, absolutely.
    Costello
    The left fielder’s name?
    Abbott
    Why.
    Costello
    I don’t know, I just thought I’d ask.
    Abbott
    Well, I just thought I’d tell you.
    Costello
    Then tell me who’s playing left field?
    Abbott
    Who’s playing first.
    Costello
    Stay out of the infield! The left fielder’s name?
    Abbott
    Why.
    Costello
    Because.
    Abbott
    Oh, he’s center field.
    Costello
    Wait a minute. You got a pitcher on this team?
    Abbott
    Wouldn’t this be a fine team without a pitcher?
    Costello
    Tell me the pitcher’s name.
    Abbott
    Tomorrow.
    Costello
    Now, when the guy at bat bunts the ball--me being a good catcher--I want to throw the guy out at first base, so I pick up the ball and throw it to who?
    Abbott
    Now, that’s he first thing you’ve said right.
    Costello
    I DON’T EVEN KNOW WHAT I’M TALKING ABOUT!
    Abbott
    Don’t get excited. Take it easy.
    Costello
    I throw the ball to first base, whoever it is grabs the ball, so the guy runs to second. Who picks up the ball and throws it to what. What throws it to I don’t know. I don’t know throws it back to tomorrow--a triple play.
    Abbott
    Yeah, it could be.
    Costello
    Another guy gets up and it’s a long ball to center.
    Abbott
    Because.
    Costello
    Why? I don’t know. And I don’t care.
    Abbott
    What was that?
    Costello
    I said, I DON’T CARE!
    Abbott
    Oh, that’s our shortstop!


    Post Format Rendering Unit Test 📎and tagged Format Chat